I made a personal portfolio page as part of my html/css project. It’s passing all the tests, but when minimizing the browser window some elements are overlapping with one another as there’s some problem with the media queries. Kindly please guide me to fix my mistake.
1 Like
welcome back @dreamo123.
Some things you can revisit;
- Run your HTML code through the W3C validator.
- There are HTML syntax/coding errors you should be aware of and address.
(This won’t correct your problem but you should clean them up)
- There are HTML syntax/coding errors you should be aware of and address.
- Add the following
property: value;
pair to your universal selector
border: solid 1px red;
(or whatever color you find easiest to see)
This will let you see how you have your elements set up and styled. You can use dev tools to help you arrange elements as needed.
Btw, you can also add that declaration to different selectors if you so choose.
On a side note, start by styling for a narrow view port first. Narrow your browser as far as it will go and style the page so it looks good at that narrow width. Then gradually widen your browser and use CSS media query break points to adjust the style for wider view ports if needed.
Hope that helps.
I agree you`ll have to implement some sort of auto feature that automatically changes with your CSS code, other than that your site looks fantastic!
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.