Problem in formatting the site

Question

Problem in formatting the site

Navigation

#1 by (0 votes)

0

Good morning, I'm having a problem with my site's css it just works from the laptop up to 4K, can someone 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

asked by anonymous 09.11.2018 / 13:19

1 answer

Deleting elements from a formgroup spoils my ngfor Get value of Select Option and Checkbox of several lines

score 0 · Accepted Answer

I've been able to solve it !! I'll post the code to anyone who 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;
}
}