Multi column picture sizing

Solved

Multi column picture sizing

jeffreym
Excursionist
34 1 7

Hello,
As you can see the images are very large. I would like the images to be maybe half the size to somehow fit all 4pictures / steps onto one page making it look aesthetically pleasing, simple and easy to read and follow.

If you can help please help :), Thank you. I will be posting alot more on here as I have had alot of help already.
I would love my own personal designer/coder for this in the future lol. Screenshot 2024-06-28 at 11.09.23 AM.png
URL: Hygiadental.com
pw: melek

Accepted Solution (1)

PageFly-Henry
Shopify Partner
1184 335 283

This is an accepted solution.

Hi @jeffreym 

This is Henry from PageFly - Landing Page Builder App

 

You can try this code by following these steps: 

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file -> Save

 

ul#Slider-template--17080595578980__multicolumn_6Et4J {

    display: flex;

    flex-direction: row;

    flex-wrap: nowrap;

}

ul#Slider-template--17080595578980__multicolumn_6Et4J .multicolumn-list__item {

    width: 23% !important;

}

In addition, on the Home page you should add featured collections so that users can easily identify the products in your store and optimize SEO.

Hope that my solution works for you.

Best regards,

Henry | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

View solution in original post

Replies 2 (2)

PageFly-Henry
Shopify Partner
1184 335 283

This is an accepted solution.

Hi @jeffreym 

This is Henry from PageFly - Landing Page Builder App

 

You can try this code by following these steps: 

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file -> Save

 

ul#Slider-template--17080595578980__multicolumn_6Et4J {

    display: flex;

    flex-direction: row;

    flex-wrap: nowrap;

}

ul#Slider-template--17080595578980__multicolumn_6Et4J .multicolumn-list__item {

    width: 23% !important;

}

In addition, on the Home page you should add featured collections so that users can easily identify the products in your store and optimize SEO.

Hope that my solution works for you.

Best regards,

Henry | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

jeffreym
Excursionist
34 1 7

Thankyou, I am playing with the width and can see that when I make it abit bigger it goes of the page. Can you help me wrap it down so there are 2 rows/columns now instead of 1 across at a decent size for the eye, possibly 30%

When you say feature collections, Do you mean a menu option up the top saying what else I have to sell or a actual section on my home page that is showing other products? I agree, I have a featured section area but it is below everything else which I should probably make it the second slide.