Tagged: 

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • January 25, 2019 at 4:40 pm #1058792
    MaeLee48

    Hi, love this theme!

    I am trying to get my color sections to be as responsive as possible. I know you can easily hide color sections on desktops, tablets and mobile devices within the theme itself, but I am looking to customize even further for certain desktop sizes, tablet sizes and phones and I having some difficulties.

    For example I want one of my desktop headers to disappear at 1400 and a new desktop header to appear at 1400 or 1401? and then disappear again at 1280. I wrote this and it seemed to work good until I got to 1400. Both color sections seem to briefly appear at the same exact time once I get to around 1400. I tried changing it to 1401 but it did not work. Is there something I am doing wrong?

    Here is what I wrote:
    .page-id-1602 #av_section_1 { display: none; }
    @media only screen and (min-width: 1400px) {
    #av_section_1 { display: block !important; }
    }
    .page-id-1602 #av_section_2 { display: none; }
    @media screen and (max-width: 1400px) and (min-width: 1280px) {
    #av_section_2 { display: block !important; }
    }

    I appreciate your help. Thank you!!

    January 27, 2019 at 7:40 am #1059296
    Rikard

    Hey MaeLee48,

    Where can we see the results you are getting?

    Best regards,
    Rikard

    January 27, 2019 at 8:27 am #1059313
    Guenni007

    your rules are correct i think – but only the transition point at 1400px got the troubles
    on the first you like to show only if it is a wider screen than 1400px
    because it is visible on default it is ok to avoid displaying it below 1400px
    so the first one you can shorten to:

    @media only screen and (max-width: 1400px) {
.page-id-1602 #av_section_1 { display: none !important; }
}

    the second rule you like to show it only between 1280px and 1400px
    so can you try:

    @media only screen and (max-width: 1400px) {
.page-id-1602 #av_section_1 { display: none !important; }
}

.page-id-1602 #av_section_2 { display: none; }
@media screen and (min-width: 1280px) and (max-width: 1400px) {
.page-id-1602 #av_section_2 { display: block !important; }
}

    here we have the point 1400 both at max-width – this has to work better
    and don’t forget to have the page-id everywhere

    January 27, 2019 at 4:43 pm #1059375
    MaeLee48

    Guenni007,

    Thank you so much for your help. That worked much better for me. Both sections 1 and 2 are now not briefly appearing at the same time anymore.

    However, now when I write it in for section 3, I experience section 2 and 3 both briefly appearing at the same time once again. It’s only briefly though that they appear together. I must be writing my code wrong. I am pretty new to using CSS so this may be incorrect. Here is what I have written now:

    @media only screen and (max-width: 1400px) {
.page-id-1602 #av_section_1 { display: none !important; }
}
.page-id-1602 #av_section_2 { display: none; }
@media screen and (min-width: 1280px) and (max-width: 1400px) {
.page-id-1602 #av_section_2 { display: block !important; }
}
.page-id-1602 #av_section_3 { display: none; }
@media screen and (min-width: 900px) and (max-width: 1280px) {
.page-id-1602 #av_section_3 { display: block !important; }
}

    Did I write in section 3 incorrect? 2 and 3 should not be briefly appearing together but they do.

    Thank you so much for your help. It is greatly appreciated!

    January 30, 2019 at 2:21 pm #1060489
    Guenni007

    https://www.w3schools.com/css/css_rwd_mediaqueries.asp
    max-width: 1280px means <= 1280px ( the 1280px is in the rule)
    min-width: 1280px means > 1280px (1280px is out of that rule)

    so this should be ok !!! but if you want to be sure leave a 1px distance between.

    @media only screen and (max-width: 1400px) {
.page-id-1602 #av_section_1 { display: none !important; }
}
.page-id-1602 #av_section_2 { display: none; }
@media screen and (min-width: 1281px) and (max-width: 1400px) {
.page-id-1602 #av_section_2 { display: block !important; }
}
.page-id-1602 #av_section_3 { display: none; }
@media screen and (min-width: 900px) and (max-width: 1280px) {
.page-id-1602 #av_section_3 { display: block !important; }
}
    January 30, 2019 at 3:43 pm #1060520
    MaeLee48

    Guenni007

    It worked! Originally, I did leave a 1px distance between my sections and it did not work. I think I had it reversed. I’m still learning!

    I appreciate all of your help! You’re the best!

    Thank you!!!

    January 30, 2019 at 4:14 pm #1060526
    Guenni007

    theoretically it had to work with the 1280 on both – because only max-width includes the named break-point – the min-width not,
    but maybe that is an old relict of the box-modell where the one browser includes the border to the box – the other not (so called 1px bug)
    When you go through enfold css you will see that they alway diminish the max value about 1px ( the min-width are on even-numbered values ( 768, 990 etc.)

    so this must work too:

    @media only screen and (max-width: 1400px) {
.page-id-1602 #av_section_1 { display: none !important; }
}
.page-id-1602 #av_section_2 { display: none; }
@media screen and (min-width: 1280px) and (max-width: 1400px) {
.page-id-1602 #av_section_2 { display: block !important; }
}
.page-id-1602 #av_section_3 { display: none; }
@media screen and (min-width: 900px) and (max-width: 1279px) {
.page-id-1602 #av_section_3 { display: block !important; }
}
    January 31, 2019 at 1:21 am #1060662
    MaeLee48

    Thank you so much. On a different platform, that was not enfold or even a wordpress site, I had the code reversed and it worked out so I was a little puzzled why I could not get it to work on here.

    That last code you gave me worked perfectly as well.

    Thank you!

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.