Archived

This topic is now archived and is closed to further replies.

  • 0

CSS by screen size?


Question

Posted · Report post

On this site I'm developing I am using this snippet of CSS to adjust the position of text in my fixednav.

.navbar .navline { position:relative; left:-29px; !important; }

It works perfectly on a desktop sized browser window. However, when the window drops in size and reflows for mobile viewing, the menu items begin off to the left of the screen. About 29px to the left, I'd guess. ;)

 

The question is - I don't know much about responsive design. Is there a way to specify that this piece of custom CSS should only apply ABOVE a certain page width?

 

Thanks for ideas!

 

-CP

Share this post


Link to post
Share on other sites

6 answers to this question

Posted · Report post

Try this in place of your code:

.navbar .navline {
    margin-left: 10px;
    position: absolute;
}

Share this post


Link to post
Share on other sites

Posted · Report post

Hi,

 

I don't see any CSS elements in our code for .navline and have never seen anyone use the operand "left:"

 

Where did those come from?

Share this post


Link to post
Share on other sites

Posted · Report post

@Rob - HA! I just imagineered them up, I guess. I wanted the first text in my fixed nav to move to the left by 29 pixels to line up (vertically) with the logo in my branding section below it. There is an empty spot to begin the fixed nav (where a logo would go, I believe, but I have that turned off.) I took a shot at positioning it that way and it worked. On full sized displays, at least.

 

If there is a more elegant way to accomplish that, I'm all ears! ;) I'm not a programmer by trade, I just hack around at stuff until it looks the way I like. 

Share this post


Link to post
Share on other sites

Posted · Report post

Bingo-bango-bongo! Thanks @Rob !

Share this post


Link to post
Share on other sites

Posted · Report post

You're welcome!

Share this post


Link to post
Share on other sites

Posted · Report post

I just tried it on an actual mobile phone (Android) and it looked fine once. but not on every page. I don't know why it would behave differently from page to page, but it seems to. Strange.

Share this post


Link to post
Share on other sites