Layout grid didn't respect content high and columns overlap (using Enfold 4.5.7) - Support

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

Author

Posts
June 9, 2020 at 3:36 pm #1220890
Caiser_Souze
Participant
Hi,
is me or with the latest update (4.7.5) grind layout when breaking point is set to “989px or smaller” the grind column still super small (hight 0px but respect the padding option) and the text or image background content fall out and overlap.

Thanks for any help or info about it :)
- This topic was modified 4 years, 5 months ago by Caiser_Souze.
June 9, 2020 at 8:53 pm #1220969

Jordan Shannon
Inactive Moderator

Hey Caiser_Souze,

What layout are you looking to achieve? Do you want the columns side-by-side? Please provide a link to the site/page in question so we can look into this further.

Best regards,
Jordan Shannon

June 10, 2020 at 8:20 am #1221085

Caiser_Souze
Participant

Hi Jordan,
thank you so much for your reply.
Probably I was not clear enough with my explanation. I will try better now with an example :)

The idea is that on an iPad (breaking point 989 or smaller) I will see grid columns one under the other and not side by side.
So with the option breaking point 767 I don’t have any problems, works everything fine, with breaking point 989 something goes wrong. It looks like the “float:left” don’t work.

Using breaking point 989 on the iPad (tested on Safari and Chrome iPad screen simulation too) the grind column maintain a high of 0 and the content fall out and goes over the column 2.

Here the test

Test Grid Layout Problem (Enfold 4.7.5)

This appends only on the iPad view… is enough that I switch to iPhone view and columns look right. Is just in between 989 and 767 that something is wrong. You will see clearly the text falling out of the column 1.

Hope I’m enough clear :)
Kind regards
CS

June 12, 2020 at 9:42 am #1221976
Caiser_Souze
Participant
Hi Jordan,
have you got to try and verify? Or have I not been able to explain myself?
Kind regards
CS
- This reply was modified 4 years, 5 months ago by Caiser_Souze.
June 15, 2020 at 10:01 am #1222577

Caiser_Souze
Participant

Hi Jordan,
any news?

June 17, 2020 at 10:02 am #1223288
Caiser_Souze
Participant
Hi Jordan,
sorry but just want to know if I was clearer enough about my problem using the layout grid. Is there something unclear in my question or example made? Thank you for your support.
- This reply was modified 4 years, 5 months ago by Caiser_Souze.
June 17, 2020 at 12:49 pm #1223345
Ismael
Moderator
Hi,

Sorry for the delay. The flex column breaks because of the float property in this css code.
```
#top .flex_column_table {
    display: table;
    table-layout: fixed;
    width: 100%;
    float: left;
    margin-top: 50px;
}
```
Did you add it somewhere? You should set it to none or remove it.

And please note that the cell containing the background image has no intrinsic height because it contains no content and only depends on the height of the other cell with the text, so when the cells stack beside each other, it collapses. That’s how table cells work.

// https://www.w3.org/TR/CSS21/tables.html#height-layout

the height of a cell box is the minimum height required by the content.

Best regards,
Ismael
June 17, 2020 at 1:24 pm #1223369
Caiser_Souze
Participant
Perfect… work!

Found in the original Enfold CSS grid.css
```
#top .flex_column_table{
	display: table;
	table-layout: fixed;
	width:100%;
	float: left;	/* added 4.7.4.1 to fix equal height after individual height columns  */
	margin-top: 50px;
}
```
with this comment, so is something that developing adds I think

For the hight of images in background, I know. Normally I add an empty space of XXpx to be sure that the column remains high enough.

Thank you Ismael for help!
- This reply was modified 4 years, 5 months ago by Caiser_Souze.
June 21, 2020 at 7:23 pm #1224431

Ismael
Moderator

Hi,

You’re welcome! Glad we could help. Please don’t hesitate to open a new thread if you need anything else.

Have a nice day.

Best regards,
Ismael
Author

Posts

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

The topic ‘Layout grid didn't respect content high and columns overlap (using Enfold 4.5.7)’ is closed to new replies.