Welcome to WebmasterWorld Guest from 54.196.244.186

Forum Moderators: not2easy

Message Too Old, No Replies

Logo won't center on small mobile devices

responsive design

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

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 4, 2002
posts: 1785
votes: 2


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?
9:33 pm on Feb 24, 2014 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:May 23, 2005
posts:742
votes: 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)

Senior Member from US 

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

joined:Apr 9, 2011
posts:12709
votes: 244


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)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 4, 2002
posts: 1785
votes: 2


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?
3:45 am on Feb 25, 2014 (gmt 0)

Senior Member from US 

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

joined:Apr 9, 2011
posts:12709
votes: 244


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)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 4, 2002
posts: 1785
votes: 2


Thanks for explaining Lucy24

this worked:

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