Welcome to WebmasterWorld Guest from 54.166.178.177

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)

WebmasterWorld Senior Member 10+ Year Member



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)

WebmasterWorld Senior Member 10+ Year Member



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)

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



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)

WebmasterWorld Senior Member 10+ Year Member



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)

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



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)

WebmasterWorld Senior Member 10+ Year Member



Thanks for explaining Lucy24

this worked:

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

Featured Threads

Hot Threads This Week

Hot Threads This Month