Why arent my CSS media queries overriding original CSS from 320px wide viewport? Here’s an example, im trying to get rid of margins from #about-site div at 768px wide screens but it isnt working, in inspect element if i turn off text-align center from 320px media query which has nothing to do with 768px whats so ever then it works. How can i fix this problem?
Here’s code:
I took a good long look at this, and i’m still struggling. And I can’t load images.
There is a lot of redundancy that you have in the code:
Can you show which checkbox in the inspector that you toggle that gives you the results you are looking for? I do see the FlexBox switch from Row to Column at that break-point, there is just a lot of code here and it’s really hard to help debug.
Your use of CSS selectors is great. But there is ton of redundancy. I say this with the best intentions; your CSS is very hard to debug because there is too much.
Not really sure if this is what you are talking about but on line 842 you have an id selector #footer and not an element selector footer.
You have:
#footer > #about-site {
margin: 0;
}
Should be:
footer > #about-site {
margin: 0;
}
BTW, I would strongly suggest you use classes for styling and not ids. I’d also suggest not using element selectors as much as you are, a few are fine but you really do not want selector like this nav > ul > li > ul > li > a
Good god always some sort of typo, thanks alot. Sorry for misunderstood problem report, but once you do right click on image i uploaded and click on other tab you’ll see whole picture, and in inspect element you would see text align center not being on 768px media query. I’ll keep that in my mind, i’ll use classes next time, i didnt do html and css for like 5 or something months at all, so my muscule memory is kinda off at it.
Yeah unfortunately JSFiddle doesnt load images from files, is there any workaround for that? btw, lasjorg has noticed where the problem was and now problem is fixed thank god. Anyway if you go right click on image i uploaded, and go to other tab you’ll see whole image, basicaly my problem was when i selected #about-site on footer down in html you can see that it still shows media query with min width of 320px on right in CSS, but problem was i used #footer instead of footer in CSS code that targets #about-site div, now i fixed my problem.
As for the images, you can’t have relative paths like this Images/html-css/html-stranica.jpg on jsfiddle. Either you need to use an image host or use a code site that allows for image upload like codesandbox.
