Copyright Codenstuff.com 2017
YOU NEED TO BE LOGGED IN TO USE THIS FEATURE


Register
Credits
0
Reputation
0
Media Query


User avatar
Media Query
Media Query
Hello

I use the code provided for responsive website and was wondering if it would be possible to use more than one with in the query
on this line

Code: Select all
@media screen and (max-width:600px)


Code: Select all
@media screen and (max-width:600px){
   h2{
      padding: 30px;
      text-align: right;
      font-size: 20pt;
      letter-spacing: 11px;
   }

   .navagationDesktop, .navagationMobile{
      display: none;
   }

   .menucheck:checked ~ .navagationMobile{
      display: block;
   }
   .menuicon{
      display: block;
      position: absolute;
      top: 26px;
      left: 10px;
      color: #f0f1f5;
      font-size: 20pt;
      padding: 3px;
      cursor: pointer;
   }

   .item input{
      display: none;
   }

   .item label, .itemlast{
      text-align: center;
      display: block;
      padding: 18px;
      background-color: #fc575e;
      font-size: 12pt;
      text-transform: uppercase;
      color: #112233;
      font-family: big john;
      cursor: pointer;
      border-bottom: solid 1px #eee;
   }

   .itemlast{
      text-decoration: none;
   }

   .item label:hover, .itemlast:hover{
      background: #223433;
      color: #fef1f5;
   }

   .item ul{
      max-height: 0;
      overflow: hidden;
      transition: all .2s;
      text-align:center;
   }

   .item ul li a{
      background: #DDD;
      display: block;
      text-decoration: none;
      color: #333;
      font-family: big john;
      font-size: 11pt;
      border-bottom: 2px solid #aaa;
      padding: 10px;
   }

   .item ul li a:hover{
      background: #eee;
   }

   .item input:checked ~ ul{
      max-height: 400px;
      transition: all .2s;
   }

   footer{
      position: fixed;
       bottom: 0px;
   }
}

User avatar
Re: Media Query
Re: Media Query
Do you mean like:

Code: Select all
@media screen and (min-width: 600px) and (max-width: 600px),(max-width: 1000px)


css-tricks have an excellent guide on media queries that is worth a look:
https://css-tricks.com/css-media-queries/

Welcome to CodenStuff.com Learn Code, Love Code. Thank you for being a member of the community.
User avatar
Re: Media Query
Re: Media Query
Hello Cody
Thanks for the prompt reply

im trying to build this website for myself http://www.mabrodie.co.uk but im having problems with the right div its not showing all the text properly can you help please i have attached all my code so far?.

Please register to download these files and remove the ads

User avatar
Re: Media Query
Re: Media Query
Posted in the wrong section, this belongs in CSS Help and Support

Image
Image



Online now

Users viewing this forum: No registered users and 1 browsing

cron