• Top Members
    Reps
    Posts
  • 834 Replies
    2585 Replies
  • 716 Replies
    2025 Replies
  • 331 Replies
    1928 Replies

Media Query

User avatar
Mark
VIP - Donator
Posts: 370

Media Query

Sat Jun 24, 2017 11:18 pm

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
CodenStuff
Site Admin
Posts: 4369

Re: Media Query

Sun Jun 25, 2017 10:36 am

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
Posts: 370

Re: Media Query

Sun Jun 25, 2017 11:22 pm

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.

User avatar
mikethedj4
VIP - Site Partner
Posts: 2576

Re: Media Query

Mon Sep 11, 2017 12:03 pm

Posted in the wrong section, this belongs in CSS Help and Support
Image
Image

Post Reply

Return to “Help & Support”