Media Query

4 posts Page 1 of 1
Contributors
User avatar
Mark
VIP - Donator
VIP - Donator
Posts: 372
Joined: Mon Aug 17, 2009 10:35 pm

Media Query
Mark
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;
	}
}
http://www.mbappz.com
User avatar
CodenStuff
Site Admin
Site Admin
Posts: 4389
Joined: Tue Aug 04, 2009 1:47 am

Re: Media Query
CodenStuff
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
Mark
VIP - Donator
VIP - Donator
Posts: 372
Joined: Mon Aug 17, 2009 10:35 pm

Re: Media Query
Mark
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?.
You do not have the required permissions to view the files attached to this post.
http://www.mbappz.com
User avatar
mikethedj4
VIP - Site Partner
VIP - Site Partner
Posts: 2592
Joined: Thu Mar 25, 2010 4:36 am

Re: Media Query
mikethedj4
Posted in the wrong section, this belongs in CSS Help and Support
4 posts Page 1 of 1
Return to “Help & Support”