Multiple column layout not responsive on smaller screens

[Skarstein]

Hello

I’m working on a page with a five column agenda. On large screens 1200px wide and more it looks fine,

but when the screen size decreases the problems increase. I expected a true responsive design to move the blocks under each other when they become to narrow to read.

Surley the two right most columns (yellow and blue) would tuck in below the red, orange and green blocks in a truly responsive system?. The effect is also seen on screen sizes between 1200 og 768, but not as pronounced as on 768.

On very small screens, all the blocks become neat rows so that’s not a problem.

[jade]

Hey Jan,

You can add slight customization in order for the columns to display with the same height through CSS flex.

Firstly, please add this code in X > Theme Options > CSS:

@media (min-width: 768px) {
  .same-height-columns {
    display: flex;
  }
}

Then add the class same-height-columns to the rows where you want to have equal columns.

Hope this helps.

[Skarstein]

Hi, thank you, but this didn’t work. The issue is the same. I added the CSS in the theme options, saved, and added the class same-height-columns for each of the rows.

I also noticed that the section and rows I was working on were classic rows and sections. I made a new non-classic section and rows to try the same solution but that didn’t work either.

Finally I tried adding the css in the custom CSS field on the page I was working on without adding it in the theme options, also this didn’t work.

[jade]

Hey Jan,

I tried checking the site that is attached to the license in your account but I can’t find the page in question since there are a lot of pages on the site.

Would you mind providing the URL of the page in question so that we can check it?

Thank you.

[Skarstein]

Sure, the page wasn’t published yet, but I published it at: https://www.focus.no/bimcon-ny/ password below

[jade]

Hey Jan,

The code I previously provided seems to work on the column but it appears it does not because the background of the columns are actually set to the button elements.

To solve that, please also add this code to the Global CSS:

.same-height-columns .x-anchor {
    height: 100%;
}

Hope this helps.

[Skarstein]

Thanks again. Yes, the CSS now works, and the page looks much better. However it dosen’t totally solve the original issue. Due the quirks of my language, and industry, I have to use long words which force the blocks wide, that is why I asked about forcing the elements to tuck in under each other.

[friech]

Hi Jan,

Ok, let’s enhance Jade’s provided CSS code, please update it to this:

.same-height-columns .x-column.x-1-5 {margin-bottom: 4%;}
@media (min-width: 768px) {
	.same-height-columns {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	align-content: stretch;
}
.same-height-columns .x-column.x-1-5 {
    display: flex;
    flex: 1 1 200px;
	}
}

I think this is the best way to present the columns, the columns will transition from 5 column rows to 4 by 1, to 3 by 2, and then 1 column on mobile.

More about CSS FlexBox

With regards to the long headline text, there is no other way around it but you need to decrease the font-size of those headlines.

Hope it helps,
Cheers!