Archived topic
Content not be shown properly in full width inner box type
3 replies · Started by Kelvin on June 2, 2019
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
Hi there,
try adding this CSS:
.generate-sections-inside-container {
overflow: auto;
}Dear David,
It works. Is it known-bug? Where can I download the latest version of css?
Best regards,
Kelvin.
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.
