I'm trying to get media queries to display my navbar <li> items as 100% of the screen width but then 20% over a certain size.

 

Someone on here helped me with my old site, concretestairslondon.co.uk and it works great on the desktop mac, but on my iphone 5 the media query doesn't seem to work (where it's needed).

 

The site is concretestairslondon.co.uk and here is my code:

<div id="nav">

<ul id="navbar">
	<div itemscope itemtype="http://schema.org/Product">
		<li><a href="http://concretestairslondon.co.uk/index.php">home</a></li>
    	<li itemprop="name"><a href="http://concretestairslondon.co.uk/portfolio.php">concrete stairs</a>
    		<ul class="sub1">
        		<li><a href="#">complex stairs</a>
        			<ul class="sub2">
            				<li><a href="http://concretestairslondon.co.uk/helical/spiral-stairs.php">concrete spiral stairs - kensington</a></li>
                			<li><a href="http://concretestairslondon.co.uk/helical/helical.php">helical concrete staircase - battersea</a></li>
                			<li><a href="http://concretestairslondon.co.uk/helical/curved-stairs.php">curved concrete stairs - st john\'s wood</a></li>
                			<li><a href="http://concretestairslondon.co.uk/helical/twisted-stairs.php">reinforced concrete helical stairs - knightsbridge</a></li>
					</ul>		
				</li>
				<li><a href="#">bespoke stairs</a>
					<ul class="sub2">	
						<li><a href="http://concretestairslondon.co.uk/bespoke/half-landing.php">reinforced concrete stairs - covent garden</a></li>
                		<li><a href="http://concretestairslondon.co.uk/bespoke/bespoke-stairs.php">bespoke stairs - knightsbridge</a></li>
                	<li><a href="http://concretestairslondon.co.uk/bespoke/cast-in-situ.php">cast-in-situ - mayfair</a></li>
                		<li><a href="http://concretestairslondon.co.uk/bespoke/non-slip-stairs.php">non-slip concrete staircase - london bridge</a></li>
						<li><a href="http://concretestairslondon.co.uk/bespoke/waterproof.php">waterproof staircase</a></li>
            		</ul>
				</li>	
			</ul>            	
		</li>
	</div>	
<li><a href="http://concretestairslondon.co.uk/faq.php">faq\'s</a></li>
<li><a href="http://concretestairslondon.co.uk/contact.php">contact us</a></li>
</ul>

</div>

 

/* Navbar Formatting -------------------------------------------------*/

/* HIDE SUB-MENU AND SUB-SUB MENU */
#navbar {
width: 100%;	
z-index: 8000;
position: absolute;
}

ul#navbar {
font-size: 2em;
}

ul#navbar ul {
font-size: 0.9em;	
}

ul#navbar ul ul {
font-size: 0.5em;	
}

#navbar ul, #navbar ul li ul li { display:none; }

/* GENERAL LIST STYLES */
#navbar li {  
    background:#1A1A1A; /* BLACK LIST BACKGROUND */
    text-align:center;    
    border-bottom:1px white solid; /* ADD BORDER UNDERNEATH EACH LIST ITEM */
}

#navbar li a {
    text-decoration:none; /* REMOVE UNDERLINE FROM LINKS */
    display:block;
    color:white; /* TEXT COLOR */
    padding:5px 0; /* ADD SOME SPACE TOP AND BOTTOM OF LI ITEMS */
}

/* SUB LIST STYLES */
#navbar ul li a {
    color:black;
    background: #eee;   /* LIGHT GREY */
    padding:5px 0;   
}


/* REMOVE BORDER FROM LAST SUB-LIST ELEMENT, <li class="last">... */
#navbar ul li.last {
border-bottom:none;
}

/* SHOW SUB-MENU WHEN ABOUT IS HOVERED */
#navbar li:hover ul  { 
display:block; 
}

/* SHOW SUB-SUB MENU WHEN 'This will show another sub-menu' is hovered */
#navbar li ul li:hover ul li  {
display:block;
}

/* SUB-SUB MENU STYLE e.g. sub menu of Complex Stairs */
#navbar li ul li ul li a {
background:lightblue;
}

/* HOVER OF ABOVE */
#navbar li ul li ul li a:hover {
background: #eeeeee;
}

/* MEDIA QUERY TO CHANGE NAV WHEN SCREEN GOES ABOVE 480px. REDUCE WINDOW SIZE TO SEE NAV CHANGE */
@media all and (min-width: 480px) {
    /* SHOW NAV ACROSS FULL WIDTH OF SCREEN, GIVE 25% WIDTH TO EACH LIST ITEM (THERE's 4 IN TOTAL, SO DIVIDE 100% BY NUMBER OF LIST ITEMS  */
    #navbar li {
        width:25%;
        float:left;
    }
    
    /* TRADITIONAL STAIRS AND COMPLEX STAIRS */
    #navbar li ul li {       
        position:relative; 
        width:100%;         
    }
    
    /* SUB LEVEL OF TRADITIONAL STAIRS AND COMPLEX STAIRS */
    #navbar li ul li ul  {        
        position:absolute;
        left:100%;        
        width:100%;
        top:0;    
    }  
}

So my interpretation is when the screen size is 480px and over wide it then shrinks the list items to 25% and floats them next to each other.

Why isn't it working on Iphone 5 where the screen is only 208px?

You need to use

<meta name="viewport" content="width=device-width">

Put this code in your header, where your other metas are.

Hope this helps

Thanks Teodara, greatly appreciated.

 

Has had a strange effect though. It now gives a static width rather than a fluid one on Iphone5 as pictured.

I think this div #share is the problem - it has fixed width of 430px, which is more than the device width, that is why it shows white space and part of the #share div on the right. Maybe use the media queries to give the div 100% width below 430px

Sorry I added to it my current site I'm designing. But I just checked it with my other site that my friendly exert helped me with and sure enough it has had the same effect.

The problem on your other site comes from div.addthis_toolbox, which width is fixed - 600px.

If you have a div with fixed width on the page (which width is more than the device width) there will be a white space on the right. All elements should be no more than 100% of the device width.

 

Hope that makes sense

Thanks Teodora, greatly appreciated.

 

The problem I've got with my formworkinlondon.co.uk is that I had to set a fixed width (by AddThis team) to shrinkwrap my sharing and follow buttons with a float:left so they would appear on the same line. I put the social buttons in my page content and just set a top margin to the top of my page content and that fixed it. With absolute position the navbar to avoid the whole page content from being affected by the hover drop down effect on the navbar list.

 

I'm realising now that's not going to work with fluid design:

 

Changes:

 

I'm going to try have the social buttons outside of the page content div. So page content is actually for the page content only lol.

How do you float a div underneath an absolutely positioned navbar?

It's difficult, because the content of Add this is an iframe

 

For both sites, maybe try and give each a element in div #social-wrap a width of 100%, when below 600px.

 

I'm going to try have the social buttons outside of the page content div. So page content is actually for the page content only lol.

How do you float a div underneath an absolutely positioned navbar?

 

Sorry, but do you need to hide the social div? If so, then maybe hide it with display:none; when below 600px (adjust the width to suit).

Thanks Teodora, no I don't want to hide the social buttons, sorry I was very misleading there, by underneath I mean below; normal flow (like pressing enter).

 

I can't believe the amount of grief I have had with the social buttons. What do professionals do?

Do you get the social buttons individually with a bit of javascript >

Put them in a php file called buttons>

Then include 'buttons'; ?

 

I cannot believe the amount of grief these buttons & navbar is causing me.

 

Massive thanks for your help on this. I'm getting what you're saying and going to try to implement.

Edited June 28, 201313 yr by Precise Formwork

I was just about to say about adding a couple more media queries to solve your iPhone issue. Lately I've been trying to use breakpoints that are natural to the content rather than devices, but sometimes that's just not practical Target some breakpoints for min/max-width: 320px, 480px, etc (you could always use ems, but lets not complicate things )

 

While AddThis is pretty useful, I'm finding them more and more of a nuisance (similar to the Facebook 'like'). Could you not use an alternative method for social? Icons rather than a plugin? Teodora's right about iFrames. They are a nuisance if you ask me. You could have a separate div underneath with clear: both but you'll need to ensure that the navbar doesn't overlap. You might have to manually tinker with top-margins, etc..

Thanks 4's, The social buttons are a nuisance. I'm so close to finishing this site and need to get it finished this week.

 

I would be tempted to try to code my own social buttons, but it may be out of my league.

 

Many thanks for your help guys, greatly greatly appreciated .

I had a quick search in Google and found this article:

http://bryanhadaway.com/how-to-make-addthis-responsive/

How to make Add This responsive.

 

Maybe it will help, and if there are still problems, you can make each a element of the #share div 100% wide, also maybe make each iframe in the #share div 100% wide, when below 600px?

Or you can just go mobile first and forget about media queries for phone devices. (doesn't mean you forget about them for tablets and the desktop)

 

means regardless of browser support on phones, it will always look alright

Edited June 30, 201313 yr by Samus

Massive thanks Teodora, and 4's. I keep hearing about media queries, but a lot of tutorials and articles had not put your meta tag.

 

Big thanks Teo. .gif' alt=':seas8:'>

Massive thanks Teodora, and 4's. I keep hearing about media queries, but a lot of tutorials and articles had not put your meta tag.

 

Big thanks Teo.

 

Mad - that meta tag is so important. Samus' comment above is also valid about using Mobile First. Might be worth considering for future sites

Massive thanks Teodora, and 4's. I keep hearing about media queries, but a lot of tutorials and articles had not put your meta tag.

 

Big thanks Teo.

 

No worries, glad it worked out for you