Reebelo 1 Posted November 9, 2018 Report Share Posted November 9, 2018 (edited) Boa tarde, estou com um problema com o css do meu site ele apenas funciona a partir do Laptop até ao 4K, alguém me sabe dizer o porquê? /*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; } } Obrigado desde já! Edited November 9, 2018 by Reebelo Link to post Share on other sites
Reebelo 1 Posted November 9, 2018 Author Report Share Posted November 9, 2018 Já consegui resolver!! Vou postar o código para quem precisar. No meu caso bastou colocar device na 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 Report Link to post Share on other sites
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now