CODEWITHSUNDEEP
csslayoutcss-positionmedia-queries
Jedda
Jedda

Reputation: 1017

Absolute Positioning and Media Queries

I'm working on a very basic one page layout that needs to be responsive. It consists of one large background image and 2-3 divs absolutely positioned around it. http://www.reversl.net/demo/ The reason I'm using absolute positioning is because the background image will need to vary in height but the text box needs to always be positioned the same distance from the bottom of the image.

I also need to place a logo bottom right of the page. Everything works well when viewed on desktop devices. But on smartphones, due to their smaller screens I need to position the logo beneath the text using media queries. Now here's the problem....because the text div is positioned absolutely....the logo get's hidden behind it on smaller screens. My initial thought was to give the logo an absolute position from the top so that it always appears beneath the text box on screen sizes 320px wide and below. However, the text box will need to vary in height so I can't work it this way.

My Question is...how can I place the logo so that it always appears beneath the text box (regardless of the text box height) on screen sizes 320px wide and below?

#bg {
max-width: 100%;
margin: 0;
padding: 0;
position: relative;
}

#title {
margin: 0;
padding: 0;
color: #f0f0f0;
background: #333;
margin: 0;
padding: .5em 1em;
width: 250px;
position: absolute;
top: -2%;
text-align: center;
}

#content {
background: #333;
width: 250px;
position: absolute;
top: 85%;
padding: .5em 1em;
color: #888;
text-align: center;
border: 1px solid #444;
}

footer {
margin: 0;
padding: 0;
}

.logo {
float: right;
width: 50px;
height: 25px;
border: 1px solid #444;
text-align: center;
padding: .5em;
color: #666;
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {

#title {top: -17%;line-height: 1;}
}

Desired Layout on mobile

Upvotes: 1

Views: 5517

Answers (1)

Simon_Weaver
Simon_Weaver

Reputation: 145980

I'm sure you figured this out by now - but one approach that can sometimes be useful is to put the same logo twice in the HTML and show or hide the one you want depending upon the width. I find this to be more maintainable, and obviously if the image has the same URL then there's minimal overhead. Absolute positioning is no fun.

// mobile
@media only screen and (max-width : 319px) 
{
   .logo.right-justified 
   {
       display: none;     // hide right logo
   }
}

// desktop
@media only screen and (min-width : 320px) 
{
   .logo.underneath
   {
       display: none;     // hide bottom logo
   }
}

Upvotes: 2

Related Questions