Problem med @media

2013-05-13 14:14

Permalänk

phroggyy

Medlem

Plats: Solna, Stockholm
Registrerad: Dec 2010

●

Problem med @media

Hej,

Håller på med att helt koda om min sida och göra den responsiv (samt nu design), och ska då använda @media i min CSS för att ändra navigeringen beroende på storlek.

Relevant CSS ser ut så här nu:

.nav-section {
	width: 100%;
}

.nav-section li {
	float: left;
	list-style: none;
}

@media screen and (min-width:48em;){
	.icon {
		display: none;
	}
	.screen-only {
		display: block;
}
}

@media screen and (max-width:480px;){
	
	.nav-section li {
	width: 25%;
	list-style: none;
	/*margin: 0;*/
	margin-top: 0;
	padding: 0;
}

.nav-section li img {
	width: 100%;
	margin: 0;
	padding: 0;
	float: left;
}

	.icon {
		display: block;
	}
	
	.screen-only {
		display: none;
	}
}

Dold text

HTML-koden är följande:

<div class="large-12 columns">
	<nav>
		<ul class="nav-section">
        	<li><img src="img/home.svg" id="homeicon" class="icon" /><p class="screen-only">Home</p></li>
    		<li><img src="img/portfolio.svg" class="icon" /><p class="screen-only">Portfolio</p></li>
        	<li><img src="img/profile.svg" class="icon" /><p class="screen-only">Profile</p></li>
        	<li><img src="img/blog.svg" class="icon" /><p class="screen-only">Blog</p></li>
    	</ul>
	</nav>

Dold text

Kan för tillfället inte se varför den inte byter till paragrafen vid större storlekar, hjälp?

MVH
Leo

Visa signatur

Rapportera Redigera

Citera flera Citera

2013-05-13 14:33

Permalänk

BuruZ

Medlem

Plats: Norrland
Registrerad: Feb 2004

●

Skrivet av phroggyy:

Hej,

Håller på med att helt koda om min sida och göra den responsiv (samt nu design), och ska då använda @media i min CSS för att ändra navigeringen beroende på storlek.

Relevant CSS ser ut så här nu:

.nav-section {
	width: 100%;
}

.nav-section li {
	float: left;
	list-style: none;
}

@media screen and (min-width:48em){
	.icon {
		display: none;
	}
	.screen-only {
		display: block;
}
}

@media screen and (max-width:480px){
	
	.nav-section li {
	width: 25%;
	list-style: none;
	/*margin: 0;*/
	margin-top: 0;
	padding: 0;
}

.nav-section li img {
	width: 100%;
	margin: 0;
	padding: 0;
	float: left;
}

	.icon {
		display: block;
	}
	
	.screen-only {
		display: none;
	}
}

Dold text

Kan för tillfället inte se varför den inte byter till paragrafen vid större storlekar, hjälp?

MVH
Leo

Gå till inlägget