CODEWITHSUNDEEP
css
DanDaMan
DanDaMan

Reputation: 73

Fixing "Position: Absolute" for mobile

So I made an entire website using percentage and VW font sizes to make the website not change on like zooming in and making the window bigger/smaller. There was a few parts where I have to overlay images on top of each other and I achieved this by using "Position: Absolute" those parts are my nav bar, and my 2 "Subscribe to our mailing list" input boxes.

The site works absolutely perfect, except when you get to right around the width of a mobile device (I don't know, maybe like 300 pixels?) then all the positioning goes wonky.

This is my CSS for the nav bar: http://pastebin.com/raw/QpjPiN4Z

I was wondering if there was some sort of way I could change the positioning somehow where it doesn't affect the rest of the website? Or maybe use media queries somehow to aid in fixing it? I have no idea what to do. Everytime I change the "Position:" type, it breaks, badly.

Upvotes: 0

Views: 6837

Answers (1)

Scott Dallas
Scott Dallas

Reputation: 347

Like Cesar suggested, use media queries in your CSS for overrides. Specify the pixels you want to do overrides.

@media (min-width: 1px) and (max-width: 300px) {
 // Do css overrides here
}

Manipulate the min/max pixel width for your overrides, then just start doing CSS. If you run into a style that won't override do something like this:

.container { height: 500px !important; }

The !important flag will override things don't seem to want to let you override them. It can come in handy when you're near losing your mind. Use chrome/firefox Inspect Element to help you along the way.

Upvotes: 1

Related Questions