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

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

Andrecolap
Excursionist
48 0 5

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

 

Andrecolap_2-1703790018455.png

 

Andrecolap_0-1703789782693.png

Andrecolap_1-1703789790938.jpeg

 

 

Replies 21 (21)

techlyser_web
Shopify Partner
1807 335 361

Hello @Andrecolap 

can you share store URL?

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
Andrecolap
Excursionist
48 0 5
the site is not published yet but here is a link to the preview, password is chonga:



https://77af35.myshopify.com/


techlyser_web
Shopify Partner
1807 335 361

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 </body> on theme.liquid


<style>

  

.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;
    }
}

</style>

techlyser_web_0-1703787919413.png

 

Mobile

techlyser_web_1-1703787967948.png

 

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
Andrecolap
Excursionist
48 0 5

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

 

Andrecolap_0-1703792473519.png

 

techlyser_web
Shopify Partner
1807 335 361

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 </body> on theme.liquid


<style>

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

</style>

techlyser_web_0-1703789639017.png

 

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.

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
Andrecolap
Excursionist
48 0 5

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_0-1703795977357.png

 

 

Andrecolap
Excursionist
48 0 5

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

 

techlyser_web
Shopify Partner
1807 335 361

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 </body> on theme.liquid


<style>

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

</style>

techlyser_web_0-1703834511617.png

 

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
Andrecolap
Excursionist
48 0 5

Thank you @techlyser_web 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_0-1703850050915.png

 

 

 

Andrecolap
Excursionist
48 0 5

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

 

techlyser_web
Shopify Partner
1807 335 361

@Andrecolap 
for that Go--> Theme--->click on customize

techlyser_web_0-1703851822106.png

Then click on multicolumn

techlyser_web_1-1703851942407.png

Then set the number of column

techlyser_web_2-1703852048646.png

 

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
techlyser_web
Shopify Partner
1807 335 361

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 </body> on theme.liquid


<style>

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

</style>

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
Andrecolap
Excursionist
48 0 5

Hi @techlyser_web,

 

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.

techlyser_web
Shopify Partner
1807 335 361

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

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
Andrecolap
Excursionist
48 0 5

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? 

 

 

Andrecolap_0-1703857399124.png

 

techlyser_web
Shopify Partner
1807 335 361

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

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
Andrecolap
Excursionist
48 0 5

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.

 

Andrecolap_0-1703863027061.png

Andrecolap
Excursionist
48 0 5

@techlyser_web 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?

techlyser_web
Shopify Partner
1807 335 361

For that you have find the code of image in multicolumn.liquid file and add code between <a href="you have do paste link here"></a> tag , And same as for description. 

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
Andrecolap
Excursionist
48 0 5

not sure I got this, on multicolumn.liquid I found only one line with <a href= (see screenshot) and that doesn't end with ></a> tag. so I don't understand where I have to paste my link, and I don't know if that line refers to the image or the description.

Thanks again for your help @techlyser_web 

 

 

Andrecolap_1-1703864107078.png

 

Andrecolap
Excursionist
48 0 5

hi @techlyser_web , if you have any suggestions for my  2 current problems, please do let me know.

With best

Andrea