Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • January 20, 2022 at 2:18 pm #1336362
    westefan

    Hi,
    I have for the header on https://nico-sgangarella.de/ two sections – one is visible on large screens and the other on all mobile devices (smaller than 990px).
    As my iPad has a width of 1112px it behaves like a large screen and shows the first section.
    Is it possible to change the general visibility setting from 990px to a higher value?
    Or change the visibility of these two sections only (and how)?
    Many thanks
    Stefan

    January 21, 2022 at 5:13 am #1336455
    Rikard

    Hi Stefan,

    Please try the following in Quick CSS under Enfold->General Styling:

    @media only screen and (min-width: 990px) and (max-width: 1112px) {
.home #av_section_1 {
  display: none; 
}
.home #av_section_2 {
  display: block; 
}
}

    Best regards,
    Rikard

    January 22, 2022 at 12:08 pm #1336633
    westefan

    Hi Rikard,

    thank you!

    Making av_section_1 unvisible works, but not displaying av_section_2.
    I can display it with
    .responsive.av-no-preview #top #wrap_all .av-desktop-hide { display: block; }
    but it still behaves like a desktop (e.g. the menu is not jumping to burger menu).

    Maybe I have to create an own section for the range between 990 and 1112 px?

    Beside this maybe it would be an idea for future development of Enfold to increase this breakpoint of 990px because tablet are larger generally.

    Best regards
    Stefan

    January 22, 2022 at 2:36 pm #1336654
    Rikard

    Hi Stefan,

    I can’t see the CSS I sent applying at all, did you remove it? We can’t check why it’s not working if it’s not added to Quick CSS for example. If you want us to test it for you, then please post admin WordPress login details in private.

    Best regards,
    Rikard

    January 24, 2022 at 10:22 am #1336857
    westefan

    Hi Rikard,
    yes, I removed CSS because the site is live. It would be great if you can take a look. Login data are in private content.
    Many thanks
    Stefan

    January 24, 2022 at 11:31 am #1336869
    Rikard

    Hi,

    Thanks for that. I’ve edited the CSS I sent previously, it’s added to Quick CSS now, and it’s working as expected. Please review your site.

    Best regards,
    Rikard

    January 24, 2022 at 1:16 pm #1336894
    westefan

    Hi Rikard,

    thank you! You’ve added !important, right?

    The best solution still would be to have “real” mobil behaviour (e.g. switching to mobile menu) for larger breakpoints.
    But I can handle your solution and you can close this thread.

    Many thanks again
    Stefan

    January 25, 2022 at 3:37 am #1336949
    Rikard

    Hi Stefan,

    Yes, I added !important to the second CSS block. I’ll go ahead and close this thread for now then, please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Change general responsive element visibility’ is closed to new replies.