Rich text alignment and big gaps between blocks

Store Design
, ,
1

Hi There,

I’ve been fussing around with the following page on our webshop: https://www.beautybrands-store.com/pages/product-advice My Colleague wants a page where customers can buy the products based on their hair concern. Now we’ve found out that the icon block works best for us. Customers see all the products directly, instead of needing to scroll through them with the collection list. Now the few problems I’m trying to fix are as follow.

  • How can I align the rich text blocks to left ( nothing I change the html or custom Css will do the trick.
  • How can I change the size of the icons/pictures for the mobile version.

Thanks in advance for all the help :slightly_smiling_face:

2

Hi @BB_Frou ,

This is Richard from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Layout->/theme.liquid->paste below code at the bottom before :

{% if template contains 'page' and page.handle == 'product-advice' %}

{% endif %}

PageFlyRichard_0-1676556623868.png
PageFlyRichard_0-1676556623868.png982×559 33 KB

I hope it would help you
Best regards,

Richard | PageFly

1 Like
3

Hi Richard,

The text is perfect! The pictures however need to be next to each other but bigger like I did on this Squarespace website. Decreasing the percentage isn’t really doing the job though.

IMG_7150.PNG
IMG_7150.PNG1242×2688 269 KB

1 Like
4

Hi @BB_Frou ,

You can try replace previous my code by below code:

{% if template contains 'page' and page.handle == 'product-advice' %}

{% endif %}

I hope it would help you
Best regards,

Richard | PageFly

1 Like
5

This is perfect thank you!!!

1 Like