Taste theme - use different alignment in different columns

Store Design
1

I’m using the Taste theme, and I’m trying to add a multi-column section at the top of my page. I want the left column left-justified, the center column center-justified, and the right column right-justified. Can someone help? I don’t want this to be a global change - just for this one section. I know I can enter code in the custom CSS field, but I just don’t know what code to use.

2

Hi @lorrainedevaux

There is no design for text align left-justified, or center-justified. But the titles we can separate the alignment to the paragraph. Like this.

Made4uoRibe_0-1701291390293.png
Made4uoRibe_0-1701291390293.png1531×365 127 KB

Or we can also do like this.

Made4uoRibe_1-1701291550363.png
Made4uoRibe_1-1701291550363.png1570×374 141 KB

Just let me know. Thanks!

3

I like both of those options. The second option is what I’m looking for. Thank you!

4

Check this one.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
#Slide-template--21177680101678__fd9540b2-ee0b-4307-a7cd-beeecefa88e4-1 > div > div.multicolumn-card__info {
    text-align: left;
}
#Slide-template--21177680101678__fd9540b2-ee0b-4307-a7cd-beeecefa88e4-2 > div > div.multicolumn-card__info {
    text-align: center;
}
#Slide-template--21177680101678__fd9540b2-ee0b-4307-a7cd-beeecefa88e4-3 div > div.multicolumn-card__info {
    text-align: right;
}
  • And Save.
  • If the code didnt work replace with this one.
#Slide-template--21177680101678__fd9540b2-ee0b-4307-a7cd-beeecefa88e4-1 > div > div.multicolumn-card__info {
    text-align: left;
}
#Slide-template--21177680101678__fd9540b2-ee0b-4307-a7cd-beeecefa88e4-2 > div > div.multicolumn-card__info {
    text-align: center !important;
}
#Slide-template--21177680101678__fd9540b2-ee0b-4307-a7cd-beeecefa88e4-3 div > div.multicolumn-card__info {
    text-align: right !important;
}
  • And Save.

Sorry, I forgot to ask is this the multi column you like to edit? This design is only for this section.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

5

Yes, this is for the multi-column, and unfortunately neither of those proposed solutions worked.

6

Would you mind to share the store URL? I would like to check if the store URL Ive edit is correct. Thanks!

7

All set now thank you. I figured it out. :slightly_smiling_face:

8

Oh good to hear. What happen then? Place in wrong file?

9

I ended up doing a completely different workaround with a table instead. :slightly_smiling_face:

10

Oh I see. Im not really sure why it didnt work, The multicolumn is not an app. Sorry for that I didnt check also how you place the code and can’t find your store URL.