Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • April 18, 2019 at 10:11 am #1092368
    michaelH

    Hi

    I have one weird issue with CSS for some reason.

    So this works perfectly:

    @media screen and (max-width: 2050px) and (min-width: 1841px) {
#footer .flex_column.first {
margin-left: 410px;    
width: 22%;
height: 70px;
}
#footer .flex_column:nth-child(2) {
width: 39%;
margin-left: 0px; 
height: 70px;
}
#footer .flex_column:nth-child(3) {
width: 17%;
margin-left: 0px; 
height: 70px;
}
}

    So then I wanted to create another statement with the values @media screen and (max-width: 2350px) and (min-width: 2051px) (the rest is basically the same, I only change some pixel values).
    However, and this is weird, the footer elements jump to the very left side if I go over 2050px, the margin left is ignored for example.

    Why is that? I can’t see any errors in my CSS and would be glad for any help.
    I just changed the container width from 1310px to 100% but this does not really change anything.

    Thanks a lot
    Michael

    April 21, 2019 at 2:37 am #1093002
    Mike

    Hey Michael,
    Sorry for the late reply, do you have a url to a demo page?
    I tried to recreate this on my localhost with no luck.

    Best regards,
    Mike

    April 21, 2019 at 8:37 am #1093010
    michaelH

    Hi Mike

    Sure – please check private content for the URL.
    It is basically only a footer with three columns, not that much magic in my opinion but maybe there is other CSS which avoids the behaviour I wish for when the browser width is more than 2050px.

    Thanks in advance
    Michael

    April 21, 2019 at 1:06 pm #1093035
    Mike

    Hi,
    Thank you, so what I’m seeing is at 2051px there is a margin-left on the first footer of 500px:

    @media screen and (max-width: 2350px) and (min-width: 2051px)
#footer .flex_column.first {
    margin-left: 500px !important;

    but then at 2350px there is no margin-left:

    body div .first, body div .no_margin {
    margin-left: 0;
}

    I believe since your rule ends at 2350px the browser looks for the next valid rule which is 0px. I recommend removing the top end of your rule and using a percentage instead of a pixel width, or adding one more open ended rule starting at 2351px using percentages.

    From what I can see we don’t have any rules that high and our last one (0px) is open-ended which should go to infinity.
    I should point out that I don’t have a screen that large and I don’t recall any questions about screens over 2350px, but this is a good point, thanks.

    Best regards,
    Mike

    April 21, 2019 at 1:27 pm #1093037
    michaelH

    Hi Mike

    Awesome – thanks!
    I was just a bit confused why the CSS class for the first element in the footer changes for that width… Anyway, I changed the class now and added a percentage value which solved it:

    @media screen and (max-width: 2350px) and (min-width: 2051px) {
body div .first, body div .no_margin {
margin-left: 21%;    
width: 22%;    
height: 70px;    
}
#footer .flex_column:nth-child(2) {
width: 39%;    
margin-left: 0px;    
height: 70px;    
}
#footer .flex_column:nth-child(3) {
width: 17%;    
margin-left: 0px;    
height: 70px;    
}
}

    And then the same for 2351px and more…
    You may close this thread now.

    Cheers and thanks a lot
    Michael

    P.S.: I don’t have such a big screen either, however, the design is more or less done for a 27″ iMac which has 2560px width (insane)…

    April 21, 2019 at 2:40 pm #1093043
    Mike

    Hi,
    Glad to help, Happy Easter :)
    We will close this now. Thank you for using Enfold.

    For your information, you can take a look at Enfold documentation here
    For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :)

    Best regards,
    Mike

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Media screen argument does not work in some cases’ is closed to new replies.