CSS left and right elements

[henoida]

I have a general questions about items on the top of the page which are positioned on the left side (such as a logo) and on the right side (such as a search box and global elements), using float: right. When minimizing the browser or looking at it on a small screen of a phone, these two elements run into one another. My question is: how can this running-into-one-another be avoided. I use an absolute positioning for the logo:

[CODE lang="css" title="logo"]#logo {
position:absolute;
top: 30px;
left: 50px;
width: 220px;
height: 63px;
background: url("../img/dynomotion-logo.png");
background-color: transparent;
}
[/CODE]

But have the right-side elements just float, e.g. the search box:

[CODE lang="css" title="search"]#searchNav {
float:right;
margin:-1px 0 1px 0;
display:block;
color:#888;
font-size:11px;
width: 250px;
top: 15px;
padding:0;
}
[/CODE]

But of course this way the run into each other. Any pointers would be very much appreciated. Thanks in advance for your time!

See example here: http://dynomotion.com/dev

 

[LTomy]

Hi henoida,

You can use the following to apply css styles only if the width of the screen smaller than 601px:

@media only screen and (max-width: 600px)
{
    div{
        /* Styles to apply */
    }
}

That way, you can change the layout of your website for smaller screens (And therefore avoid overlaps).

 

[henoida]

Hi LTomi,

Thanks a lot for your answer, but unfortunately I do not quite understand it ;-(

So the div inside the @media only screen... will define the look of the site for smaller screens (600px and less), but what would need to go in there to avoid the overlapping?

Sorry for asking what surely must be pretty basic stuff.

 

[LTomy]

Using that, you could, when the screen is small, put the logo above the search box instead of at its left. So if the screen is small, you change the position of the logo and search box to put the logo above it.

Basically, the styles inside the braces {} will only be used if the condition inside the parentheses () is true (Example: The screen has a with of less than 601px).

 

[henoida]

OK, I think I understood and changed my style sheet - but for some reason it does not work. Even with the Google translate element set not to display, it still shows on my phone or when resizing my browser.

What did I do wrong?

[CODE lang="css" title="logo"]@media screen and (max-width: 600px) {
#logo {
position:absolute;
top: 30px;
left: 50px;
width: 220px;
height: 63px;
background: url("../img/dynomotion-logo.png");
background-color: transparent;
}

#searchNav {
position:absolute;
top: 15px;
left: 50px;
margin:-1px 0 1px 0;
color:#888;
font-size:11px;
width: 250px;
padding:0;
}

#google-translate {
display: none;
}
}[/CODE]

 

[LTomy]

Do you have the following in your <head>?

<meta name="viewport" content="width=device-width, initial-scale=1">

Also, make sure @media screen and (max-width: 600px) is located *after* the rest of the styles. Otherwise, the styles may be overwritten.

First, try something simple: If you use the following, is the text becoming blue when you resize the window to a width smaller than 801px?:

@media screen and (max-width: 800px)
{
    p{
        color: blue;
    }
}

 

[henoida]

This worked. Thank you so much for your help! Highly appreciated!