• Top Members
    Reps
    Posts
  • 834 Replies
    2585 Replies
  • 716 Replies
    2025 Replies
  • 331 Replies
    1928 Replies
Our minions are trying to make the site more secure by encasing the server in a cage made of solid SSL-ium which may throw up some issues when using the site for the next few hours. Bear with us while we weld this thing together and we are sorry for any inconvenience this may cause.

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: 4359

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”