Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • December 28, 2023 at 4:43 am #1428936
    Enfoldfanatic

    Hi guys,

    I’m using the color section on a homepage with a minimum height set at 90%, however this applies on both desktop and mobile. For mobile I would like to set a min-height of 50%. I couldn’t find some css snippet for such setting on the documentation page https://kriesi.at/documentation/enfold/color-section/#toggle-id-1.

    What would be the proper CSS snippet to set an alternative min height on mobile viewports?

    Thanks and regards,
    S

    December 28, 2023 at 7:13 am #1428937
    Guenni007

    give a custom class to your color-section – f.e. : fifty

    then put your rules inside a media-query: ( if you like to have it on a different screen-width than 767px – change that f.e. to 989px )

    @media only screen and (max-width:767px) {
  .responsive #top .avia-section.fifty {
    height: 50vh;
  }
}


    PS:     if you really like to have that only for mobile devices – and not for small screen sizes ? you can change that selector ( and use the enfold default class for mobile devices: avia_mobile ):

    .responsive.avia_mobile #top .avia-section.fifty {
  height: 50vh;
}
    December 28, 2023 at 11:20 am #1428941
    Enfoldfanatic

    Hi Guenni,

    Thanks for your reply. This particular code snippet only lowers the height of the background, the overflow turns out grey. The inner content seems to “utilize” the height set within the ALB settings tab. There I have still set that the minimum height should be 90%. Should I change that as well?

    Regards,
    S

    December 28, 2023 at 3:34 pm #1428959
    Guenni007

    That exactly is the meaning of background-images. The content height determins the height of the section.

    by the way – it now makes me wonder that the original inline rule set by Enfold is with height and not min-height:

    .av-minimum-height-90:not(.av-slideshow-section) .container {
  height: 90vh;
}

    so my code above reflects that.
    Try first now to set only a min-height to 50vh

    But as mentioned : the content height will be the determinating factor on that.

    December 29, 2023 at 2:08 pm #1428997
    Enfoldfanatic

    The above snippet doest affect my container behavior, maybe Mike or Rikard could throw in a suggestion?

    December 30, 2023 at 2:54 pm #1429024
    Mike

    Hi,
    Please link to your page so we can example the color section that you would like to be 50% for mobile. I assume that this would be only up to 767px correct?
    In your opening question you said that for mobile you would like a min-height of 50%, perhaps you are really looking for a max-height of 50% if the mobile content is larger than 50% and you find it too large?

    Best regards,
    Mike

    December 30, 2023 at 3:13 pm #1429028
    Enfoldfanatic

    Hi Mike,

    I will post the URL in the private content, it regards the first container on the homepage. Indeed we would like to set a height of 50% of the hero container for the viewport up to 767px.

    A max-height would probably would as well indeed, the content within the container will fit easily in there (50% space).

    Regards,
    S

    December 30, 2023 at 3:33 pm #1429030
    Enfoldfanatic

    Hi Mike,

    I think I already solved it by adding the following CSS snippet:

    @media only screen and (max-width: 767px) {
    #hero .container {
    max-height: 400px !important;
    }
    }

    Regards,
    S

    December 30, 2023 at 3:35 pm #1429031
    Mike

    Hi,
    Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

    #hero, #hero .av-section-color-overlay-wrap {
height: 50vh;
}

    After applying the css, please clear your browser cache and check.
    Please see the screenshot in the Private Content area of the expected results.

    Best regards,
    Mike

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