Columns Not Stacking on iPad in Color Section - Support | Kriesi.at

Tagged: grid row header overlap

Viewing 12 posts - 1 through 12 (of 12 total)

Author

Posts
July 31, 2025 at 8:10 pm #1487425

ahaderer
Participant

Hello Support Team,
I have created a layout with three columns (each 1/3) inside a color section. Unfortunately, I’m experiencing an issue where the columns do not stack on the iPad (in portrait mode), but instead remain side by side. As a result, the layout becomes cluttered or partially cut off.
I have already tried several CSS rules to force the columns to stack vertically on medium screen sizes, but none of them have worked. The cache has also been cleared.
Could you please let me know how I can achieve the desired stacking behavior correctly?
You will find the links in the private content.
Thank you in advance for your support!
Best regards,
Andrea

August 1, 2025 at 5:48 am #1487440
Ismael
Moderator
Hey Andrea,

Thank you for the inquiry.

Try to add this css code to adjust the breakpoint of the columns on smaller screens.
```
@media only screen and (max-width: 1366px) {
    .responsive #top #wrap_all #breakpoint1024 .flex_column.col {
        margin: 0;
        margin-bottom: 20px;
        width: 100%;
        display: block;
        float: none;
    }
}
```
Result:

View post on imgur.com

Best regards,
Ismael
August 1, 2025 at 9:43 am #1487451

ahaderer
Participant

Hello Ismael,
thank you but it still does not work.
Kind regards Andrea

August 2, 2025 at 2:03 pm #1487492
Mike
Moderator
Hi,
Try adding this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:
```
@media only screen and (max-width: 1366px) {
#top #breakpoint1024 .flex_column_table {
    display: block;
}
}
```
After applying the css, please clear your browser cache and check.

Best regards,
Mike
August 4, 2025 at 10:03 am #1487548

ahaderer
Participant

Hello Mike,
It worked after I changed the breakpoint in the screen options line from 767px to 989px – thank you!

However, I have another issue:
On one of my pages, I placed a grid row at the top with an image and some text. When I reduce the viewport width, the headline disappears under the header, and the image doesn’t resize to match the height of the text area.
How can I fix this?

Kind regards, Andrea

August 5, 2025 at 7:25 am #1487589
Ismael
Moderator
Hi,

Try to add this css code:
```
.responsive #top #wrap_all .av-layout-grid-container.av-5enyt3-e3a17494e866bcf05416abe291c1d6a0 {
    display: flex;
}

.responsive #top #wrap_all .flex_cell.av-4hiz9z-633b1e0ab579d3c11a88073322c9de8f .flex_cell_inner,
.responsive #top #wrap_all .flex_cell.av-4hiz9z-633b1e0ab579d3c11a88073322c9de8f .flex_cell_inner .avia-image-container,
.responsive #top #wrap_all .flex_cell.av-4hiz9z-633b1e0ab579d3c11a88073322c9de8f .flex_cell_inner .avia-image-container div,
.responsive #top #wrap_all .flex_cell.av-4hiz9z-633b1e0ab579d3c11a88073322c9de8f .flex_cell_inner .avia-image-container div div,
.responsive #top #wrap_all .flex_cell.av-4hiz9z-633b1e0ab579d3c11a88073322c9de8f .flex_cell_inner .avia-image-container div div img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
```
If you need this applied to every grid row element using 1/2 + 1/2 layout, use this instead:
```
.responsive #top #wrap_all .av-layout-grid-container {
    display: flex;
}

.responsive #top #wrap_all .flex_cell.av_one_half .flex_cell_inner,
.responsive #top #wrap_all .flex_cell.av_one_half .flex_cell_inner .avia-image-container,
.responsive #top #wrap_all .flex_cell.av_one_half .flex_cell_inner .avia-image-container div,
.responsive #top #wrap_all .flex_cell.av_one_half .flex_cell_inner .avia-image-container div div,
.responsive #top #wrap_all .flex_cell.av_one_half .flex_cell_inner .avia-image-container div div img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
```
View post on imgur.com

Best regards,
Ismael
August 6, 2025 at 11:25 am #1487632

ahaderer
Participant

Hello, it works at the bottom of the homepage but it is not working at the top of the pages “ÜBER MICH” and “RAHMENBEDINGUNGEN”. Kind regards Andrea

August 6, 2025 at 12:15 pm #1487635
Ismael
Moderator
Hi,

Thank you for the update.

Did you try the second set of css rules without the UID av-4hiz9z-633b1e0ab579d3c11a88073322c9de8f?

You can also apply a unique css class name to the Grid Row element where the modification is needed, for example “av-custom-grid-eq-height”, and then use the following css code.
```
.responsive #top #wrap_all .av-layout-grid-container.av-custom-grid-eq-height {
    display: flex;
}

.responsive #top #wrap_all .av-custom-grid-eq-height .flex_cell.av_one_half .flex_cell_inner,
.responsive #top #wrap_all .av-custom-grid-eq-height .flex_cell.av_one_half .flex_cell_inner .avia-image-container,
.responsive #top #wrap_all .av-custom-grid-eq-height .flex_cell.av_one_half .flex_cell_inner .avia-image-container div,
.responsive #top #wrap_all .av-custom-grid-eq-height .flex_cell.av_one_half .flex_cell_inner .avia-image-container div div,
.responsive #top #wrap_all .av-custom-grid-eq-height .flex_cell.av_one_half .flex_cell_inner .avia-image-container div div img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
```
— https://kriesi.at/documentation/enfold/add-custom-css/#enable-custom-css-class-name-support

Best regards,
Ismael
August 6, 2025 at 12:56 pm #1487640

ahaderer
Participant

Hello, it is still not working. The header overlaps the Headline. Kind regards Andrea

August 6, 2025 at 1:17 pm #1487644
Ismael
Moderator
Hi,

To fix the header overlap issue, you can add this css code:
```
.html_header_transparency #main {
    padding-top: 90px!important;
}
```
View post on imgur.com

Best regards,
Ismael
August 6, 2025 at 1:54 pm #1487645

ahaderer
Participant

Hello Ismael, unfortunately it still dosen’t work. Best Andrea

August 11, 2025 at 4:59 am #1487823

Ismael
Moderator

Hi,

Sorry for the delay. We found an incorrect css rule in the Quick CSS field and fixed it — missing curly brace. The css modifications below that point should now work correctly. Please make sure to purge the cache before testing the page.

Best regards,
Ismael
Author

Posts

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.