Hi,
Why isn’t @media working? I’ve got this problem only in chrome.
"meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0"
I’ve added all this stuff and this is CSS:
@media screen and (max-width: 600px) {
.card1 {
height:300;
}
}
I’ve tried both with “screen” and “only screen”.
Help!
300 what? Inches, feet, miles or px perhaps
Hi there Weronikaskowronska10,
and a warm welcome to these forums. 
You need to define the units…
height: 300em / px / %
Good, golly, gosh, @PaulOB is on fire tonight. 
His holdiday must have recharged his batteries. 
coothead
I also assume that the above is a copy and paste error and should be two tags as follows.
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Still away sunning myself 
I’ve corrected it and still, there is no change. It keeps working in other browsers, just chrome can’t read it properly. Help!
Hi there Weronikaskowronska10,
please give us a link to the problematic site or, failing that,
all the HTML and CSS involved in the problem.
This will then enable us to see what you are seeing and
probably allow us to correct it, all things being equal.
coothead
https://github.com/madeofstardust/swduch
swduchstargard.cba.pl
You are calling in Bootstrap twice. Although it may have little to do with the problem, once only in the <head> would be better.
I’m guessing the real problem has to do with duplicate id values. for those there should be only one each at most.
<div class="text card card-body" id="wiekszy">
<h4 id="two">Ogłoszenia</h4>
<h5> XIX niedziela zwykła, 12.08.2018r</h5>
<p>W uroczystość Wniebowzięcia Najświętszej Maryi Panny, 15.08, Msze Święte będą odprawiane według porządku niedzielnego.
Na pamiątkę podania głoszącego, że Apostołowie zamiast ciała Maryi znaleźli kwiaty, poświęca się kwiaty, zioła i kłosy zbóż, dziękując Bogu za plony ziemi, za ich moc leczniczą i odżywczą. Poświęcenie plonów podczas każdej Mszy Świętej</p>
<p>Pierwsza jednodniowa pielgrzymka z Kolegiaty Strgardzkiej do Sanktuarium Marki Bożej Fatimskiej na osiedlu Słonecznym w Szczecinie wyruszy 15.08 o godzinie 4.15. Na zakończenie pielgrzymki Msza święta o 13.00. Organizatoezy zapraszają do wspólnego pielgrzymowania.</p>
<p>Trzydniowa piesza pielgrzymka do Sanktuarium Miłosierdzia Bożego w Myśliborzu rozpocznie się 23.08 o 7.00 w Sanktuarium Fatimskim w Szczecinie. Zapisów można dokonać za pomocą <a href=www.mysliborska.pl>strony internetowej</a> lub bezpośrednio przed pielgrzymką.</p>
<p>Wspólnota Apostołów Miłosierdzia Bożego organizuje jednodniowy wyjazd do Sanktuarium Miłosierdzia Bożego w Myśliborzu 25.08. Koszt 25zł. Zgłoszenia wyłącznie pod numerem telefonu 602 300 688.</p>
</div>
<div class="box">
<div class="text card card-body" id="wiekszy">
When using “Chrome 68.0.3440.106” I see this…
…which shows that this…
@media screen and (max-width: 600px) {
.card1 {
height:300px;
}
}
…is being implemented for the first box.
But as @Mittineague has pointed out, duplicated ids will
probably effect the other boxes. 
Your page, though, does have other coding errors…
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fswduchstargard.cba.pl%2F
…starting with this…
</!DOCTYPE html>
…which has an errant forward slash - / - character. 
coothead
swduchstargard.cba.pl
I’ve corrected all the errors and still, it does not work.
I don’t understand Your advice
could You please explain it? The problem is with first 3 boxes; why aren’t they in normal row, but instead they are displayed as if the screen was narrower than 600px? And why does it work in every other browser but chrome?
I’ve corrected the ID issue and it doesn’t work anyway. The problem I’m having is with the @media, and only in chrome, I don’t understand why (wrrr) Help!
Hi there Weronikaskowronska10,
I am unable to discern any differences between
Chrome, Firefox and IE11’s display of your page. 
coothead
I concur with coothead. The page does exactly what you have told it to do.
What exactly do you see, and what do you think it’s doing wrong?
Keep in mind that your boxes’ behavior is also being governed by Grid, which has a trigger point at 768px, so there is a 168px margin in which your box height is normal and they will be in a column.
As all the others have said the page displays the same in Chrome as other browsers so you need to provide screenshots of what you are seeing so that we can make sure we are looking at the right things. Also make sure you have cleared your cache as you may have old styles hanging around on your machine and breaking it just for you.
The media query is being applied fine in Chrome but the 300px height is a bad coding as that is a magic number and does not relate to content as such and prone to break should you have more content or someone increases their text size.
On large screens you have set the card height to 260px which means that the text is already spilling out of the box before it gets to a smaller screen anyway. You will rarely give a fixed height to elements that hold fluid content like text. Use a min-height or some automatic equalizing method such as flexbox or display:table/cell.
Your usemap image at the top of the page is 750px wide and breaking all small screen sizes lower than that. Code your menu in html and css and don’t use an image map and then you can scale and re-arrange for smaller screens more easily.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.