homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Mobile Internet / Mobile Web Site Design and Development
Forum Library, Charter, Moderators: not2easy

Mobile Web Site Design and Development Forum

Logo won't center on small mobile devices
responsive design

 5:56 pm on Feb 24, 2014 (gmt 0)

I'm using responsive design.

I have a logo image that I have float:left on anything wider than tablets with a byline (centered) and also room for ads (float:right) in the header.

On anything below tablet size I have removed the byline and ads with Display:none and that works however the setting I have for logo "float:none; display:block; margin:0 auto;" isn't working. The logo is still displaying as float:left on all devices below tablet size.

I have validated css and html

CSS for tablet size and above:

.logo {float:left;
margin:0; }

CSS for anything below tablet size:

.logo {float:none; display:block; margin:0 auto; }
.byline { display:none; }
.ad { display:none; }

<div class="logo">
<img src="images/logo1.gif" alt="name">
<div class="ad">####Advertize####</div>
<div class="byline">#######byline#########</div>

Can some one tell me what I'm doing wrong?



 9:33 pm on Feb 24, 2014 (gmt 0)

You have to give it a width. Block level elements fill the entire width if you don't.


 9:50 pm on Feb 24, 2014 (gmt 0)

Edit: Whoops! drdr beat me to it.

Have you set an explicit width on the .logo element? If not, any block-level non-floated element is treated as 100% with default alignment (generally left, unless your system uses an rtl language). So either set it to {text-align: center;} or give it a width in pixels. Centering seems easiest, since there's nothing else happening in the div. But if it's always the same graphic, an explicit width should work too.


 10:09 pm on Feb 24, 2014 (gmt 0)

I forgot to mention I have this set up for all images:

img {
height: auto;
border:0; }

It is my understanding that you have to leave width out of image tags or they won't reduce in size on mobile devices.

Does this mean I have to leave "display: block" out of any element that contains an image?


 3:45 am on Feb 25, 2014 (gmt 0)

If the screen is so small that the image won't fit at its natural size, centering will no longer be a problem :) Keep the width declaration in your default CSS; change it only in your responsive code-- the @media rule or whatever you're using. The forms {width} and {max-width} tend not to like each other. That's probably where the advice about reducing comes from. So whenever you've set one explicitly, set the other one to {auto}.

Every time I wrestle with something that's supposed to resize gracefully, I console myself with the knowledge that at least I don't have to worry about MSIE.

Does this mean I have to leave "display: block" out of any element that contains an image?

You hardly ever need {display: block;} at all. The main exceptions are when you're overriding a default, such as
table.links {display: block;}
or changing something you said elsewhere, like canceling an earlier
{display: none;}
A <div> is block unless you've explicitly told it to be something else. Floats and display have nothing to do with each other, at least not in CSS.


 2:23 pm on Feb 25, 2014 (gmt 0)

Thanks for explaining Lucy24

this worked:

.logo {width:98%; text-align:center; float:none; margin:0 auto; }

Global Options:
 top home search open messages active posts  

Home / Forums Index / Mobile Internet / Mobile Web Site Design and Development
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved