Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1092368

    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

    #1093002

    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

    #1093010

    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

    #1093035

    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

    #1093037

    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)…

    #1093043

    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

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.