Multicolumn/Featured product page width

Store Design
, ,
1

Hi is anyone please able to help me with making multicolumn and featured product collections on the home page full width of the page at all please?

So for product collection remove the white space at each side please where arrows are below:

Melodie1990_0-1731684442359.png
Melodie1990_0-1731684442359.png2872×1494 283 KB

Same as multicolumn, this seems to have a large white space to right hand side:

Melodie1990_2-1731684578675.png
Melodie1990_2-1731684578675.png2868×1503 383 KB

preview link if needed is: https://oa6hp1xq9bm6sc11-73804087584.shopifypreview.com

Thank you!

2

Hi @Melodie1990

You check the slider on the desktop

You just need to follow these steps:

  1. Go to the Online Store
  2. Go to customize
  3. select the section and and find the option says desktop slider Just uncheck that

I hope this solution works for you!
If it does, please Like It and Mark It As A Solution, or support me by Buying Me A Coffee to keep me going!

3

Hi Mahran,

I unticked that and I still have white space to the right of the columns. No matter how many columns I add? I do prefer to have a slider but without the white space if possible.

Melodie1990_0-1731710648521.png
Melodie1990_0-1731710648521.png2716×1364 350 KB

4

Hi @Melodie1990

You can try adding this CSS in your theme.css

You need to follow these steps:

  1. Go to the Online Store

  2. Go to theme

  3. click on three dots " … " then select code edit

  4. search for theme.css or base.css file

  5. Past that CSS code their

slider-component { margin: 0 !important; }
slider-component ul li { width: calc((100% - var(--desktop-margin-left-first-item)) / 3) !important; }

I hope this Solution works if it Still doesn’t work then kindly share your collaboration code and I can check the liquid code for you

please Like It and Mark It As A Solution, or support me by Buying Me A Coffee to keep me going!

5

Hi @Melodie1990

I hope you are well. You can follow our instructions below:

Step 1: Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
Step 2: From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/iDxwa8zBQ4Z-
Step 3: Copy the code below and paste it there

Here is the code for Step 3:

.collection.page-width {
    max-width: unset !important;
    padding: 0 !important;
}

image (19).png
image (19).png1919×880 243 KB

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.