css – How do I work with responsive design?


I use Media Queries, right, and my layout will have to adapt to different devices such as tablets, iphone, smartphones, notebook and TVs, but I found a problem with the tablet in landscape mode, it has an approximate resolution of 1024x768 , in notebook it would be 1024x600 . I use Media Queries for the correct tablet and use max-width , just remembering that I did "desktop first", soon I'm going to turn it into mobile but I can't differentiate from one to another. The two have the same width of 1024 , only the height is different , and that's the problem. Here's the model I made for the tablet version.

@media (max-width: 1024px){

#menu ul {
        left: 26%;

        margin-top: 200px;

        margin-top: 50px;

    #header {
        height: 750px;

    video {

        position: absolute;
        top: 0;
        left: 0;
        z-index: -50;
        /*  box-shadow: inset 0px 0px 200px 100px rgba(0,0,0,0.6);*/
    .image.ico {

        margin-left: 70px;
        margin-top: 100px;

        left: -300px;
        top: 70%;

    .botao-mais input[type="button"],.mais{
        margin-left: 175%; 

        margin-top: 200px;
        margin-left: 50px;

    .botaozao input[type="button"],.jogos-botao{
        margin-left: 15%;
        margin-top: 30px;   


    .botaozao input[type="button"]:hover,.jogos-botao{
        background-color: #fff;
        color: #333;
        left: -300px;
        top: 257%;
                                   Team Speak
        z-index: 2000 !important;

        background-repeat: no-repeat;


    .botoes-team input[type="button"],.btn-sobre-team{
        background-color: transparent;
        color: #fff;
        width: 100px;
        height: 50px;
        border:3px solid #fff;
        text-align: center;
        margin-left: -9%;
        margin-top: 10px;   
        border-radius: 6px;
        font-family: Gabriola;
        font-size: 1.7em;
        cursor: pointer;
    .botoes-team input[type="button"]:hover,.btn-sobre-team{
        background-color: #fff !important;
        color: #333 !important;
        transition:0.5s !important;
        cursor: pointer !important;

        width: 40%;
        margin-top: -10px;

    #footer .copyright {
        left: 38%;

Just the basic initial averages I intend to use:

  • 1280 x 1024
  • 1024 x 768
  • 768 x 1024
  • 480 x 320
  • 1680 x 1050
  • 1024 x 600

And I have one more problem, I made the Medias Queries for this first 1280x1024 resolution and as soon as I did, the other two stopped working, which were 1024x768 e 768x1024 .


You can specify and apply as per the desired height and width combination. Example:

@media (min-width: 768px) and (max-width: 979px)

Honestly, isn't it easier to use some framework like bootstrap ?

Scroll to Top