Flexbox layout fine in Cornerstone but not on live site

[designerken]

Working on some flexbox layouts and within cornerstone they appear fine. But looking at the desktop version live, it is not rendering properly.

SM View

MD View

LG VIEW

XL VIEW

Sorry the site is local so no link to share, so images will have to suffice.

1250 width you can see they are wrapping below.

978 wide screen and below seems fine.

Latest versions of theme and wordpress, no plugins installed. Local testing. No Caching.

[lely]

Hi @designerken,

Can you try to disable the left panel from view in content editor. Then check agaon on large screen if it is still showing 2 columns. Click the button as shown in the screenshot below:

I encountered same issue, and I think the root cause is your GAP width under Setup. I can see you are using 5rem. Try to decrease it. Check again after.

Let us know how this goes.

[designerken]

@lely

thanks for you reply. That dit not solve it as you can see.

The Gap is also not the issue here as the CALC funtion is subtracting from the 40% and it works fine on smaller screen sizes.

@media (max-width: 1199.98px) and (min-width: 979px) {
    .e5-7 > .x-row-inner > *:nth-child(2n - 1) {
        flex-basis: calc(40% - 5rem);
    }
}

[designerken]

Adding the template, to a new page it seems to function properly.

But when I remove the section and add it back in via load template on the home page it seems that its missing the two 1200px wide breakpoints? Also looking further down my page there are other issues with the 1200px wide as well? Why wouldn’t the code generate/include that breakpoint on that page?

@media (min-width: 1200px) {
    .e47-5 > .x-row-inner > *:nth-child(2n - 1) {
     flex-basis: calc(40% - 5rem);
    }
  }

@media (min-width: 1200px) {
.e47-5 > .x-row-inner > *:nth-child(2n - 0) {
flex-basis: calc(59.665% - 5rem);
} 
}

[designerken]

ok I found the culprit…

Further down the page I was trying to make a 6 column layout using repeat(6, 1fr) in the flexbox layout editor. Not sure why adding that for a different section was messing up all the flexbox sections though.

Once I removed that repeat everything was playing nice and looking as it should. Now I just need to figure out how to make a 6 column layout for logo images.

[friech]

Hi @designerken,

The repeat(6, 1fr) is for CSS Grid Layout, if you’re using the Row Flexbox layout you can have 16.667% instead that is 100% / 6 to have a 6 columns row.

Guide to Flexbox
Guide to Grid

Hope it helps,
Cheers!