Elementor Question posted in
A comprehensive tutorial library can be found here.

Elementor – Why CSS Media Queries look different even though screens have the same resolution

I have created a WordPress website using Elementor live builder and some jQuery and CSS mainly. Here’s the CSS:

#menu-contact, #menu-solutions, #menu-about, #menu-regulation, #menuu { 
text-decoration: none; 
color: #0B1B70; 
justify-content: center;
display: inline-block;
min-width: 60px;
max-width: 235.97px;
white-space: nowrap;
position: relative;
width: 100%;
} 

.menu-item-text {
    -webkit-transition: border 200ms ease-out; 
-moz-transition: border 200ms ease-out; 
-o-transition: border 200ms ease-out; 
transition: border 200ms ease-out; 
border-bottom: 2.11px solid transparent; 
border-top: 2.11px solid transparent; 
}


#menuu:hover .menu-item-text, 
#menuu:focus .menu-item-text, 
#menuu:active .menu-item-text{ 
border-bottom: 2.11px solid #61f6ff; 
border-top: 2.11px solid #61f6ff; 
}
#menu-contact:hover .menu-item-text, 
#menu-contact:focus .menu-item-text, 
#menu-contact:active .menu-item-text{ 
border-bottom: 2.11px solid #61f6ff; 
border-top: 2.11px solid #61f6ff; 
}

#menu-solutions:hover .menu-item-text, 
#menu-solutions:focus .menu-item-text, 
#menu-solutions:active .menu-item-text{ 
border-bottom: 2.11px solid #61f6ff; 
border-top: 2.11px solid #61f6ff; 
}

#menu-about:hover .menu-item-text, 
#menu-about:focus .menu-item-text, 
#menu-about:active .menu-item-text{ 
border-bottom: 2.11px solid #61f6ff; 
border-top: 2.11px solid #61f6ff; 
}

#menu-regulation:hover .menu-item-text, 
#menu-regulation:focus .menu-item-text, 
#menu-regulation:active .menu-item-text{ 
border-bottom: 2.11px solid #61f6ff; 
border-top: 2.11px solid #61f6ff; 
}


@media (min-width: 1280px) {
  #menu-contact {

    }
}
    @media (max-width: 1280px) {
  #menu-solutions {
    }
}
@media (max-width: 1280px) {
  #menu-regulation {
      left: 30px;
}
}

    @media (max-width: 1280px) {
  #menu-about {
      left: 88px;
    }
    }
       @media (max-width: 1280px) {
  #menuu {
          left: 40px

    }
       }

@media (max-width: 1279px) {
  #menu-contact {
      right: 66px;
    }
}
    @media (min-width: 769px) {
  #menu-solutions {
padding (0, 20px, 0, 0)
  }
@media (min-width: 769px) {
  #menu-regulation {
margin-left: 65px;
}
}

    @media (min-width: 769px) {
  #menu-about {
margin-left: 45px;
    }
    }
       @media (min-width: 769px) {
  #menuu {
right: ;       }

@media (min-width: 769px) {
  #menu-contact {
      right: 66px;
    }
}
    @media (min-width: 769px) {
  #menu-solutions {
padding: 0px 15px 0px 0px;
    }
}
@media (min-width: 769px) {
  #menu-regulation {
margin-left: 65px;
}
}

    @media (min-width: 769px) {
  #menu-about {
margin-left: 45px;
    }
    }
       @media (min-width: 769px) {
  #menuu {
margin-left: 0px;
    }
       }

              @media (min-width: 1680px) {
  #menu-contact {
margin-left: 42px;    }
}
    @media (min-width: 1680px) {
  #menu-solutions {
left: 14px;    }
}
@media (min-width: 1680px) {
  #menu-regulation {
right: 60px;}

}


    @media (min-width: 1680px) {
  #menu-about {
            left: 12px
      }
    }
       @media (min-width: 1680px) {
  #menuu {
padding: 0px 26px 0px 0px;
    }
       }

       @media (min-width: 1920px) {
  #menu-contact {
margin-left: 52px;    }
}
    @media (max-width: 1920px) {
  #menu-solutions {
left: 14px;    }
}
@media (max-width: 1920px) {
  #menu-regulation {
right: 78px;}

}


    @media (max-width: 1920px) {
  #menu-about {
padding: 0px  105px 0px 0px;
    }
    }
       @media (max-width: 1920px) {
  #menuu {
padding: 0px 15px 0px 0px;
    }
       }

I have styled the main menu at the top according to several desktop screens I have- 1920, 1680 and 1280 width. I needed to use padding, left, right and margins because I noticed some attributes didn’t always work. But the main issue is that when I check the menu on my laptop, which has the 1920px width too but is 15″ and not 25″, the gaps between the menu links aren’t equal and they change.

Here’s the link: mayabarber.co.il

I can’t attach HTML because it was created with a live builder and I didn’t write it.

Since media queries are related to screen resolution, what can I do when it comes to same resolution screens with different styling? How can I make it look well on 1920 width screen, both on 15″ and 21″+.

Thanks!

Tags:

2

Answers


  1. 0

    Try to specify a general screen size range,then distinguishing between retina and non-retina screens.
    For Example,

    /* ----------- Non-Retina Screens ----------- */
@media screen and (min-device-width: 1200px) 
              and (max-device-width: 1600px) 
              and (-webkit-min-device-pixel-ratio: 1) { 
 }

 /* ----------- Retina Screens ----------- */
 @media screen and (min-device-width: 1200px) 
               and (max-device-width: 1600px) 
               and (-webkit-min-device-pixel-ratio: 2)
               and (min-resolution: 192dpi) { 
 }
    Login or Signup to reply.
  2. 0

    add this in your head tag

        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search