Page 1 of 1

Media Query

Posted: Sat Jun 24, 2017 11:18 pm
by 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;
	}
}

Re: Media Query

Posted: Sun Jun 25, 2017 10:36 am
by 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/

Re: Media Query

Posted: Sun Jun 25, 2017 11:22 pm
by 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?.

Re: Media Query

Posted: Mon Sep 11, 2017 12:03 pm
by mikethedj4
Posted in the wrong section, this belongs in CSS Help and Support