Media Queries Override rules
I need help with these styles for each of the media queries. Some headings are positioned more right than they need to be for certain media queries. I have explored every avenue/option but can't find a resolution to this.
8 Replies
My first suggestion would be to remove the
position: absolute unless you really need it... for a heading, I can't see why you would need to have that.
Right now, no matter what you do, the margin-left: 14.6rem !important is always going to win, because it has !important, which means you can't over-ride it.
As a general rule of thumb, avoid using !important.
Without seeing what you are trying to do, it's hard to help much more than that, but I have a feeling there is a much easier way to accomplish what you're trying to do, could you share some screenshots of your layout?Like @Kevin says, without further context it's hard to say whats wrong exactly, however you are also mixing classes and id's. That gives some specificity bumps where you might not expect them. Then !important is a nuke. Plus I'm confused by the
min-width: 0px it looks like it can just be removed and it would still work. Would make the code more readable.@rosg154 please share your code some other way, zip uploads aren't allowed. Try something like codepen or codesandbox (check #How To Ask Good Questions)
CodeSandbox
CodeSandbox is an online editor tailored for web applications.
@wschaap91 @jochemm
You can always override important with another important (I think, I don't use important) later in the code. If you have access to the source file, remove all important flags. They just make your life harder.
Also, as mentioned, remove absolute position style from contact-us-heading-mobile since it just throws your heading out of the document flow. Unless you need it like that, since I don't know the look of your site. You can also ditch this class and apply style for media query to contact-us-heading. You don't need to define extra classes which are used just for different media query styles.
Best would be to give link to the website and show where is the problem.
But if your heading is too much right, that's the margin-left style on contact-us-heading you defined for devices up to 548px. So every device with css width up to 548px will show your contact heading with margin left of 14.6 rem.
Looking at your code right now, I see a lot of things that would make life easier if you started it from scratch again.
It looks like a deeper understanding of flexbox could go a long way in helping you simplify things a lot.
I've cleaned things up a touch here just on the navigation (though I dropped the mobile nav, just to focus on keeping it simple for the moment)
https://codepen.io/kevinpowell/pen/eYQbwjN/9a5e36ecdfd4cfa3a1b4bd2729612854
How can I have the same result by removing the important flags?
@kikky1902