Problem in website formatting

Asked

Viewed 43 times

0

Good morning, I’m having a problem with the css of my site it only works from the Laptop up to 4K, someone can tell me why? 

 /*Mobile S*/
@media only screen and (max-width: 320px) {
.content{
margin-left: 35%;
margin-top: 250%;
margin-right: 35%;
background: -webkit-linear-gradient(left, #666666, #333333);
padding-top: 5%;
border-radius:15px;
    height: 320;
}
}

/*Mobile M*/
@media only screen and (min-width:321px) and (max-width: 376px) {
.content{
margin-left: 35%;
margin-top: 128%;
margin-right: 35%;
background: -webkit-linear-gradient(left, #666666, #333333);
padding-top: 5%;
border-radius:15px;
    height: 320;
}
}

/*Mobile L*/
@media only screen and (min-width:377px) and (max-width: 426px) {
.content{
margin-left: 35%;
margin-top: 111%;
margin-right: 35%;
background: -webkit-linear-gradient(left, #666666, #333333);
padding-top: 5%;
border-radius:15px;
    height: 320;
}
}

/*Tablet*/
@media only screen and (min-width:427px) and (max-width: 768px) {
.content{
margin-left: 35%;
margin-top: 53%;
margin-right: 35%;
background: -webkit-linear-gradient(left, #666666, #333333);
padding-top: 5%;
border-radius:15px;
    height: 320;
}
}

/*Laptop*/
@media only screen and (min-width:769px) and (max-width: 1025px) {
.content{
margin-left: 35%;
margin-top: 36%;
margin-right: 35%;
background: -webkit-linear-gradient(left, #666666, #333333);
padding-top: 5%;
border-radius:15px;
    height: 320;
}
}

/* Laptop L*/
@media only screen and (min-width:1025px) and (max-width: 2559px) {
.content{
margin-left: 35%;
margin-top: 25%;
margin-right: 35%;
background: -webkit-linear-gradient(left, #666666, #333333);
padding-top: 5%;
border-radius:15px;
    height: 320;
}
}

/* 4K*/
@media only screen and (min-width:2560px) {
.content{
margin-left: 35%;
margin-top: 13%;
margin-right: 35%;
background: -webkit-linear-gradient(left, #666666, #333333);
padding-top: 5%;
border-radius:15px;
    height: 320;
}
}

css formatting

  • Young your rules of media queries seem to be in the wrong order... try to start with the rules of 4k and leave last the rules of mobile etc... Take the test and see if it works, if it works, tell me I’ll give you an answer with more details

  • Before posting had already done this and did not work.

1 answer

0


I already solved!! I will post the code to whoever needs it. In my case just put device in the query.

/* 4K*/
@media only screen and (min-device-width:2560px) {
	.content{
	margin-left: 35%;
    margin-top: 13%;
    margin-right: 35%;
    background: -webkit-linear-gradient(left, #666666, #333333);
    padding-top: 5%;
	border-radius:15px;
	    height: 320;
}
}

/* Laptop L*/
@media only screen and (min-device-width:1025px) and (max-device-width: 2559px) {
	.content{
	margin-left: 35%;
    margin-top: 25%;
    margin-right: 35%;
    background: -webkit-linear-gradient(left, #666666, #333333);
    padding-top: 5%;
	border-radius:15px;
	    height: 320;
}
}

/*Laptop*/
@media only screen and (max-device-width: 1025px) and (min-device-width: 769px){
	.content{
	margin-left: 35%;
    margin-top: 36%;
    margin-right: 35%;
    background: -webkit-linear-gradient(left, #666666, #333333);
    padding-top: 5%;
	border-radius:15px;
	    height: 320;
}
}

/*Tablet*/
@media only screen and (min-device-width:427px) and (max-device-width: 768px) {
	.content{
	margin-left: 35%;
    margin-top: 53%;
    margin-right: 35%;
    background: -webkit-linear-gradient(left, #666666, #333333);
    padding-top: 5%;
	border-radius:15px;
	    height: 320;
}
}

/*Mobile L*/
@media only screen and (min-device-width:377px) and (max-device-width: 426px) {
	.content{
	margin-left: 35%;
    margin-top: 111%;
    margin-right: 35%;
    background: -webkit-linear-gradient(left, #666666, #333333);
    padding-top: 5%;
	border-radius:15px;
	    height: 320;
}
}

/*Mobile M*/
@media only screen and (min-device-width:321px) and (max-device-width: 376px) {
	.content{
	margin-left: 35%;
    margin-top: 128%;
    margin-right: 35%;
    background: -webkit-linear-gradient(left, #666666, #333333);
    padding-top: 5%;
	border-radius:15px;
	    height: 320;
}
}

/*Mobile S*/
@media only screen and (max-device-width: 320px) {
	.content{
	margin-left: 35%;
    margin-top: 90%;
    margin-right: 35%;
    background: -webkit-linear-gradient(left, #666666, #333333);
    padding-top: 5%;
	border-radius:15px;
	    height: 320;
}
}

  • 1

    Face for solved, but be careful with that, because when you talk device is the width of the device’s screen, not the width of the window... test to ensure that nothing is bugging... https://answall.com/questions/140997/qual-%C3%A9-a-difference%C3%A7a-entre-max-width-e-max-device-width

Browser other questions tagged css formatting

You are not signed in. Login or sign up in order to post.