Columns don't stay inline

Author Posts

Protostarit

Hi Sebastian,

On the websites I’ve built so far the responsiveness is mostly fine. I tweek it here and there, but there is one thing that happens on all the sites in the Desktop & Tablet view that I haven’t been able to solve. Some of the columns don’t stay inline with each other. They are ‘uneven’.

I have a picture of an example, but I can’t upload pics here.

Please help 🙂

Kind regards,

Linda


Sebastian

Hey Linda,

Would you mind posting a link to your site or emailing it if you prefer? That will help me diagnose the issue better than an image anyway.

Thanks,
Sebastian


Protostarit

The link is https://www.littlebeachtribe.co.za. For example the Scrunch Bucket/Stockist row.

Or http://www.dance4funkzn.co.za. The grey subscribe box.

I’m only talking about the desktop & tablet view.


Sebastian

Thanks for sharing the links. I see what you mean.

Applying some flexbox properties can solve your issue. MT doesn’t currently have GUI fields for flexbox. But it’s likely flexbox properties will be included in the next update of Microthemer. For now, you can solve the issue on your Dance for fun page by adding the following custom code to Microthemer (you can just paste it into the code editor via View > Code editor):

.post-21 .fl-col-group {
	display:flex;
}
.post-21 .fl-col {
	flex:1;
}
.post-21 .fl-col-content {
	height: 100%;
}

I’ve prefixed the selectors with an article id so the styles do not take effect side-wide.

The HTML divs surrounding your bucket and form example actually already have flexbox properties set. But if we were to set 100% height on the image it would be stretched upwards, which would would distort the proportions of the image. And so I think it might be best to leave that one.

BTW you would need to also set height to 100% on several parent elements in order for the height of the image to increase (in case you want to experiment with that yourself).

I hope that helps a bit!

Cheers,
Sebastian

You must login or register to reply to this topic.