Adjust layout and ratio of "Text columns with images"

Store Design
, , ,
1

Hi all

I would like to adjust the ratio between 2 columns of one specific section in one template to be 66% image (first column) and 33% second column.

Screenshot 2024-08-23 at 08.19.49.png
Screenshot 2024-08-23 at 08.19.49.png3404×1192 307 KB

Additionally I would like the text column (right/2nd column) to vertically align to the middle of the image.

As I only want to do this on this section I assume all needs to go in the Custom CSS for this section. I have tried “vertical-align”, which doesn’t work. Padding will “pad” the whole section, not only the text column and also only works with absolute numbers, not % aka ratio.

We are using Impulse theme.

Would be great to get some help here!

Cheers

Susanne

2

Hello @Susn

Could you please share your store URL;

3

Sure, sorry for that: https://limar.com/

but the template I am working on is not live yet!

Would you need that? and if yes, how can I share this with you?

4

Hi @Susn ,

If it needs to be customized for this section, please send me the page link that includes the section, I will check and guide it for you.

5

Hi
Thank you for offering your help.

This would be the product I am talking about: https://limar.com/products/air-atlas-mips-copy

Thanks a lot in advance!

Susanne

6

Hi @Susn ,

Please go to Actions > Edit code > Assets > theme.css file and paste this at the bottom of the file:

@media only screen and (min-width: 769px) {
#shopify-section-template--23264795394390__text_columns_QJtE4g .grid {
    align-items: center;
    display: flex;
}
#shopify-section-template--23264795394390__text_columns_QJtE4g .grid__item:first-child {
    width: 66%;
}
#shopify-section-template--23264795394390__text_columns_QJtE4g .grid__item:first-child>div {
    max-width: none !important;
}

#shopify-section-template--23264795394390__text_columns_QJtE4g .grid__item:last-child {
    width: 33%;
}
}
7

Hi Namphan

thanks a lot for the quick help and this code actually works, for this section.

Maybe I should have phrased my need a bit different.

I actually need to apply this to multiple sections in multiple templates, but not all.

This is why I asked for a “Custom CSS fix” for this section.

Is there a why to apply this to a multitude of sections without implementing a snippet in the themes.css for every single one?

Thanks

8

Hi @Susn ,

I checked and the code doesn’t actually have a class that can be shared for this section, can I send you a collaborator invite? it will help me add a class for this