Breakpoint (Media Query) for “Mobile Landscape” ignored

  • Artan

    (@artankrasniqi1988)


    1 year, 4 months ago

    Hi,

    I tested deeply why some styles won′t appear to my defined breakpoints. It seems that the CSS-Flow of the mediaqueries is not sorted correctly for the front end. I defined following breakpoints:

    • Laptop = 1220px and below
    • Tablet Landscape = 1024px and below
    • Tablet Portrait = 959px and below
    • Mobile Landscape = 768px and below
    • Mobile Portrait = 480px and below

    I set a margin to a container inside a flex container to be 16px top on Tablet Landscape and below. Then I set the margin of the same container to be 0px on Mobile Landscape and below. The styles are not working for Mobile landscape breakpoint (768px to 481px).

    It seems that the flow of the CSS is not in order. Here is the order off the CSS that front end throws out:

      @media (max-width: 1024px)
.elementor-15598 .elementor-element.elementor-element-4f55113 {
  --margin-top: 16px;
  --margin-right: 0px;
  --margin-bottom: 0px;
  --margin-left: 0px;
}
  @media (max-width: 768px)
.elementor-15598 .elementor-element.elementor-element-4f55113 {
  --margin-top: 0px;
  --margin-right: 0px;
  --margin-bottom: 0px;
  --margin-left: 0px;
}

    So, as the flow of the Media Querie for Tablet Landscape is set before the Mobile Landscape, in Firefox the CSS for all the margins for Mobile Landscape are crossed out and ignored. That′s at least my assumption.

    You can reproduce it yourself I think. Just create the breakpoints. Create a container inside a flexcontainer. Add 16px margin top at Tablet Landscape. Add 0px margin top to Mobile Landscape. See that the 16px will stay until the Mobile Portrait breakpoint and below is reached. Then it works again.

    I tried to fix it via giving every breakpoint a value in the margin but it makes no difference. I thought perhaps it would need it. But it seems Mobile Landscape is just ignored.

    Thanks for your help.

Viewing 1 replies (of 1 total)
  • Thread Starter Artan

    (@artankrasniqi1988)

    I dig a bit deeper and I think it′s really a syntax problem on your site. I tested it the same way for the width of the container for mentioned media queries. Here it works. I thinks because the media queries in CSS are defined more precisely. The CSS output for the queries here is different and the browser takes then the changes for Mobile Landscape:

      @media (max-width: 768px) and (min-width: 481px)
.elementor-15598 .elementor-element.elementor-element-4f55113 {
  --width: 100%;
}
  @media (max-width: 1024px) and (min-width: 481px)
.elementor-15598 .elementor-element.elementor-element-4f55113 {
  --width: 13%;
}

    A range of min and max is defined here whereas in the mentioned problem, not. I think this makes it a bit more obvious.

    Thanks again.

Viewing 1 replies (of 1 total)
  • The topic ‘Breakpoint (Media Query) for “Mobile Landscape” ignored’ is closed to new replies.