homepage Welcome to WebmasterWorld Guest from 54.226.21.57
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

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
Lorel

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4648659 posted 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; }


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

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

 

drhowarddrfine

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4648659 posted 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.

lucy24

WebmasterWorld Senior Member lucy24 us a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



 
Msg#: 4648659 posted 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.

Lorel

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4648659 posted 10:09 pm on Feb 24, 2014 (gmt 0)

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

img {
max-width:100%;
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?

lucy24

WebmasterWorld Senior Member lucy24 us a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



 
Msg#: 4648659 posted 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.

Lorel

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4648659 posted 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