3 Replies - 791 Views - Last Post: 25 November 2014 - 04:19 PM

#1 olioli2345   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 25-November 14

Trouble with Media Query formatting.

Posted 25 November 2014 - 11:35 AM

Hi there.

I'm trying to use a media query to allow the text in the UL to change into the icons in the UL. I've assigned them to a span class and then used this class in both queries.

 <div>
		<nav>
			<ul>
                <li><span class="text"><a href="index.html"><img src="../images/LOGO.svg" height="44px"></a></span></li>
                <li><span class="text"><a href="../images/PSD's/home.svg">Home</a></span></li>
                <li><span class="text"><a href="../images/PSD's/sandwiches.html">Our Sandwiches</a></span></li>
                <li><span class="text"><a href="../images/PSD's/contactus.html">Contact Us</a></span></li>
                <li><span class="text"><a href="../images/PSD's/whatwedo.html">What We Do</a></span></li>
                <li><span class="icon"><a><img src="../images/LOGO.svg" height="44px"></a></span></li>
                <li><span class="icon"><img src="images/PSD's/home.svg" height="44px"></span></li>
                <li><span class="icon"><img src="images/PSD's/aboutus.svg" height="44px"></span></li>
                <li><span class="icon"><img src="images/PSD's/sandwich.svg" height="44px"></span></li>
                <li><span class="icon"><img src="images/PSD's/contactus.svg" height="44px"></span></li>
			</ul>
		</nav>


this is the HTML with the UL.

@media (min-width: 641px) {
    nav ul li 
    {
    span.icon {display:none}
    span.text {
        
        display:inline-block; 
    margin-left: 20px;
	font-size:20px;
	line-height:44px;
	font-family: "Josefin Sans";  
	text-align:center;
	color:white;
    
    background-color: black;
	-o-transition:.5s;
	-ms-transition:.5s;
	-moz-transition:.5s;
	-webkit-transition:.5s;
	transition:.5s;
}
    }}

@media (max-width: 640px) {
    nav ul li
    {
    span.icon 
    {
    display:inline-block;
    line-height: 44px;
    background-color: black;
    width: 20%;
    float:left;
    }
    
    span.text
    {
    display:none
    }
}


And this is the CSS which accompanies it.

THE ERROR:

What is happening is that when the resolution hit the 640px (e.g. goes into icon mode), it's fine and works great.. but anything above the 640px just stays as icons, as if it's not showing the text.

Is This A Good Question/Topic? 0
  • +

Replies To: Trouble with Media Query formatting.

#2 GetSet   User is offline

  • D.I.C Regular

Reputation: 44
  • View blog
  • Posts: 411
  • Joined: 08-February 11

Re: Trouble with Media Query formatting.

Posted 25 November 2014 - 12:57 PM

The problem appears to have to do with nesting. The following works, using your code with modifications to reduce nesting:

<style>
@media (min-width: 641px) {
    nav ul li .icon {
		display:none
	}
    nav ul li .text {
        
        display:inline-block; 
		margin-left: 20px;
		font-size:20px;
		line-height:44px;
		font-family: "Josefin Sans";  
		text-align:center;
		color:white;
		
		background-color: black;
		-o-transition:.5s;
		-ms-transition:.5s;
		-moz-transition:.5s;
		-webkit-transition:.5s;
		transition:.5s;
	}
}

@media (max-width: 640px) {
    nav ul li .icon {
    
		display:inline-block;
		line-height: 44px;
		background-color: black;
		width: 20%;
		float:left;
    }
    
    nav ul li .text {
		display:none
    }
	
}

</style>

<div>
	<nav>
		<ul>
               <li><span class="text"><a href="index.html"><img src="../images/LOGO.svg" height="44px"></a></span></li>
               <li><span class="text"><a href="../images/PSD's/home.svg">Home</a></span></li>
               <li><span class="text"><a href="../images/PSD's/sandwiches.html">Our Sandwiches</a></span></li>
               <li><span class="text"><a href="../images/PSD's/contactus.html">Contact Us</a></span></li>
               <li><span class="text"><a href="../images/PSD's/whatwedo.html">What We Do</a></span></li>
               <li><span class="icon"><a><img src="../images/LOGO.svg" height="44px"></a></span></li>
               <li><span class="icon"><img src="images/PSD's/home.svg" height="44px"></span></li>
               <li><span class="icon"><img src="images/PSD's/aboutus.svg" height="44px"></span></li>
               <li><span class="icon"><img src="images/PSD's/sandwich.svg" height="44px"></span></li>
               <li><span class="icon"><img src="images/PSD's/contactus.svg" height="44px"></span></li>
		</ul>
	</nav>
</div>


Was This Post Helpful? 0
  • +
  • -

#3 olioli2345   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 25-November 14

Re: Trouble with Media Query formatting.

Posted 25 November 2014 - 02:25 PM

View PostGetSet, on 25 November 2014 - 12:57 PM, said:

The problem appears to have to do with nesting. The following works, using your code with modifications to reduce nesting:



I tried using this, it hasn't worked though. Should I upload all of my CSS? Maybe there is a formatting error taking place above?
Was This Post Helpful? 0
  • +
  • -

#4 GetSet   User is offline

  • D.I.C Regular

Reputation: 44
  • View blog
  • Posts: 411
  • Joined: 08-February 11

Re: Trouble with Media Query formatting.

Posted 25 November 2014 - 04:19 PM

worked for me as shown above. However showing all your code would be ideal. Also showing how you implemented my modified solution based on your code would be instructive. I cant see how it would not work, having tested it myself before posting. Unless you did something different.

Post your current CSS and HTML.

This post has been edited by GetSet: 25 November 2014 - 04:23 PM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1