[Support request] Content not be shown properly in full width inner box type

Home Forums Support [Support request] Content not be shown properly in full width inner box type

Home Forums Support Content not be shown properly in full width inner box type

  • This topic has 3 replies, 2 voices, and was last updated 2 years ago by David.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #917769
    Kelvin

    Dear Sir/Madam,

    I face a new problem when setting the Box Type in page section.

    Below is my code to place three images in the section

    <div class="grid-33">
    <div class="service-box"><img ....> AIRCRAFT MANAGEMENT</div>
    </div>
    <div class="grid-33">
    <div class="service-box"><img ....> AIRCRAFT MANAGEMENT</div>
    </div>
    <div class="grid-33">
    <div class="service-box"><img ....> AIRCRAFT MANAGEMENT</div>
    </div>

    If I set the section’s Inner Box Type to Contained, images are shown good fit but it is not I want. ( https://prnt.sc/nwmavq )

    If I set the section’s Inner Box Type to Full Width, images are shown out of the box. ( https://prnt.sc/nwmcsi ), I expect the background color of this section is in light grey color.

    I set both padding top and bottom to 80px ( https://prnt.sc/nwmdb9 )

    Please advise how I can make the section in full width without overlapping? You can visit my site from the URL I provided.

    Best regards,

    Kelvin

    #917800
    David
    Staff
    Customer Support

    Hi there,

    try adding this CSS:

    .generate-sections-inside-container {
        overflow: auto;
    }
    #917806
    Kelvin

    Dear David,

    It works. Is it known-bug? Where can I download the latest version of css?

    Best regards,

    Kelvin.

    #917812
    David
    Staff
    Customer Support

    Hi there,

    not a bug – the grid-33 classes uses the CSS float property. Floated elements are taken out of the normal document flow, so the parent container does not know they are there and therefore doesn’t respect their height.

    There are various fixes to manage floats. The above method is the simplest for me.

    Just need to remember that although those classes can be used they are designed for the theme which already considers this behaviour.

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