How can I align multicolumn and rich text sections on my homepage?

[Andrecolap]

Hi there,

I am trying to align all the sections of my home page (see screenshots below).

On the desktop version the multicolumn section is not aligned to the others, while on the mobile is the rich text that is not aligned.

Any suggestions?

With best

Andrea

[niraj_patel]

Hello @Andrecolap

can you share store URL?

[Andrecolap]

the site is not published yet but here is a link to the preview, password is chonga:

https://77af35.myshopify.com/

[niraj_patel]

Hello @Andrecolap

You can add code by following these steps

1. Go to Online Store → Theme → Edit code.

2. Open your theme.liquid file

3. Paste the below code before on theme.liquid

.background-none .multicolumn-card__image-wrapper { margin-left: unset !important; margin-right: unset !important; } @media screen and (max-width:767px){ .rich-text__wrapper { display: flex; justify-content: center; width: unset !important; } }

Mobile

[Andrecolap]

Thanks Techlyser_web,

the problem is nearly fixed. The only bits that are not aligned now are the descriptions under the images in the multicolumn section (see screenshot). Do you know how I can sort this?

Also I would like to add links to the images and descriptions on the multicolumn sections, rather than in the few words ‘Go to Art’, ‘Go to Furniture’, etc, which I had to add afterwards.

Thank you

[niraj_patel]

Hey @Andrecolap

You can add code by following these steps

1. Go to Online Store → Theme → Edit code.

2. Open your theme.liquid file

3. Paste the below code before on theme.liquid

.background-none .multicolumn-list .multicolumn-card__info{ padding-left: unset !important; }

And for your last issue you have to do some custom code like: you have to add anchor tag on image and description in multicolumn.liquid file.

[Andrecolap]

Thanks Techlyser_web,

but this last fix didn’t work. The descriptions in the multicolumn section are still not aligned with the images above them.

What I see in your screenshot is exactly what I want.

Re the other issue, hpw do I add anchor tag on image and descriptions?

Many thanks for your assistance

[Andrecolap]

Note I didn’t restore the original version of theme.liquid before adding the last bit of code.

[niraj_patel]

Hello @Andrecolap

You can add code by following these steps

1. Go to Online Store → Theme → Edit code.

2. Open your theme.liquid file

3. Paste the below code before on theme.liquid

.multicolumn-card .multicolumn-card__info { padding-left: 0 !important; }

[Andrecolap]

Thank you @niraj_patel but for some reasons that didn’t work.

It’s all ok from mobile but the text is still not aligned on desktop (see below). Any further ideas?

[Andrecolap]

Also in the multicolumn sections I am trying to add anchor tags on images and descriptions to link them to the collections, but with no success. If you could guide me with this as well, it would be great. Thank you

[niraj_patel]

Hey @Andrecolap

You can add code by following these steps

1. Go to Online Store → Theme → Edit code.

2. Open your theme.liquid file

3. Paste the below code before on theme.liquid

@media screen and (min-width: 750px){ .background-none .multicolumn-list .multicolumn-card__info{ padding-left: unset !important; } }

[niraj_patel]

@Andrecolap
for that Go–> Theme—>click on customize

Then click on multicolumn

Then set the number of column

[Andrecolap]

Hi @niraj_patel ,

regarding the number of columns, I just closed the editor opened it again and adjusted the relating option, and it worked.

The text alignment is not sorted even after trying to paste the last bit of code that you suggested.

Also I still didn’t figure out how to add anchor tags on images and descriptions, or better to the the entire columns, to link them to the collections.

[niraj_patel]

can you share screenshot of the code where you paste?
Because I applied the code and it is working.

[Andrecolap]

@niraj_patel it worked with this code. Thank you!

Any suggestions on how to add anchor tags to the the single columns, to link them to the collections?

[Andrecolap]

Anyway I realised I pasted that bit of code twice (see screenshot). I tried to remove one of the 2 codes and it wasn’t working anymore.

Also I am getting this message about 'Attempting to close HtmlElement ‘body’ before HtmlElement ‘style’ was closed. (see screenshot)

Is this something to worry about?

Shall I start another post regarding linking column sections to collections?

[niraj_patel]

You need to remove the code from line number 382-391.

[niraj_patel]

For that you have find the code of image in multicolumn.liquid file and add code between tag , And same as for description.

[Andrecolap]

If I remove the code from line number 382-391 (or from 383-291) or from 392-400 I have again the problem I had before: the text is not aligned with the images. If I keep both codes the text is aligned but I keep receiving the warning/error message.