Hi,
I’m busy with the responsive club website and when I open chrome devtools and make the screen really small it works all right but when I toggle the device toolbar the screen stays the way it’s set on the widest screensizes and the media querries don’t seem to work.
How come??? and how to make it switch at the right moments?
here is the website and here is the code.
greetings,
Marcus
ps: text on the website is in dutch
Hi Marcus,
you set media queries for different classes and elements. Do you have an example which style from which media query doesn’t apply on your page?
Hi Mirja,
thanks for your reply!
for instance:
In the part ‘leden’ with the pictures of people (id= ‘leden’) it’s 3 pictures on the widest screen because width is set to 30% and later to 45%.
and at line 339 of styles.css (screensize < 600px) it’s set to 100% so it should be al list of pictures but in device toolbar it keeps showing two pictures besides each other.
The width for the class .images in the #leden container is set to 100% for viewports smaller than 600px:
@media only screen and (max-width: 600px) {
/* ... */
#leden .image {
width: 100%;
}
and this is what I see:
@media only screen and (max-width: 1400px) {
#leden .image {
width: 45%;
}
What I see when my viewport is approximately 1000px wide is this:
When the viewport get larger than 1400px, I see 3 pics in a row. That’s what I would expect with the settings you did.
yeah, that’s also what I see when I open chrome devtools and diminish the screen but when I toggle the device toolbar or when I open the site on my telephone (marcusbbb.github.io/saboteurs) it doesn’t go to the <600px viewport that I expect.
Sorry, misunderstood your reply initially. When you don’t see the effect on your smartphone it’s probably due to the setting in the html head. Try to add this to your head:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
deep sigh!
that’s it!
thanks a lot!