Dawn 2.5 remove whitespace between sections and resize multicolumn width

Solved
sisaul
Explorer
55 0 16

Hello

I would like to have 3 consecutive multicolumns on landing page. I want all the sections to form one single "section" without the whitespace between between them and I would also like to resize the multicolumn width and move the text+button horizontally center of the multicolumn. The webpage is in early development stages but the link is here: https://qkqsvrmpvolk2x06-60215460006.shopifypreview.com 


The end-result I am looking for would look something like this:

sisaul_0-1641320689674.png

Thank you in regards

 

Accepted Solution (1)

Accepted Solutions
LitCommerce
Astronaut
1236 270 267

This is an accepted solution.

Hi @sisaul,

I have changed it:

Screenshot.png

like my previous tutorial, just add it, everything will display fine.

If it helped you solve your issue, please mark it as a solution. Thank you and good luck.

 

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!

View solution in original post

Replies 18 (18)
KetanKumar
Shopify Partner
31195 3113 10459

@sisaul 

sorry for that issue can you try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/section-multicolumn.css ->paste below code at the bottom of the file.

@media screen and (min-width: 750px) {
.multicolumn.background-secondary {
    margin-top: calc(4rem + var(--page-width-margin)) 0 calc(5rem + var(--page-width-margin));
    padding-bottom: 0;
}
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
sisaul
Explorer
55 0 16

Hi @KetanKumar

I'm sorry but it does not seem to have any effect.

LitCommerce
Astronaut
1236 270 267

Hi @sisaul,

Go to Assets > section-multicolumn.css and paste this at the bottom of the file:

.multicolumn.background-secondary{
	padding: 0 !important;
    margin: 0 !important;
}
.multicolumn-list{
	margin-top: 0 !important;
}
.multicolumn-list .grid__item{
	padding: 0 !important;
    margin: 0 !important;
}
.multicolumn-list .multicolumn-card{
	display: flex;
    align-items: center;
}

Hope it helps!

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
sisaul
Explorer
55 0 16

Hi @LitCommerce 

 

It removed the white space between sections and put the multicolumn text horizontally centered. Thank you!
One thing I noticed is that when I try to use image width as full width of the column, the image will disappear completely.

Is there also a way to resize the multicolumn width? I would like to have the size(width and height) of the multicolumn exactly the same as the image size.

Thank you in advance.

dmwwebartisan
Shopify Partner
10710 2337 3311

@sisaul 

Go to Assets > section-multicolumn.css and paste this at the bottom of the file:

.multicolumn-card-spacing {
    padding-top: 0.5rem !important;
    margin-left: 0.5rem !important;
    margin-right: 0.5rem !important;
}


.multicolumn-card__image-wrapper--half-width {
    width: 100% !important;
}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
sisaul
Explorer
55 0 16

Hi @dmwwebartisan

I tried it with 0 rem and it removed the margins completely, thank you. 
Although the column width is still larger than the image itself. Is there a way to make both columns(text and image) exactly the size of the image?

sisaul_0-1641386240179.png

Thank you in advance!

 

dmwwebartisan
Shopify Partner
10710 2337 3311

@sisaul 

Go to Assets > section-multicolumn.css and paste this at the bottom of the file:

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

thanks!

if not solved your problem let me know and add me as a staff member I will try to fix your problem.

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
sisaul
Explorer
55 0 16

Hi @dmwwebartisan 

It removed the padding but is it possible to place the text between those red lines?

sisaul_1-1641389688293.png

Thank you in advance!

 

dmwwebartisan
Shopify Partner
10710 2337 3311

@sisaul 

add me as a staff member I will try to fix your problem.

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
sisaul
Explorer
55 0 16

Hi @dmwwebartisan 

 

I am sorry I haven't done that before, but I think I sent you an invite. 
I also saw the collaborator option in there, do I have to give you request code?

LitCommerce
Astronaut
1236 270 267

Hi @sisaul,

Go to Assets > section-multicolumn.css and paste this at the bottom of the file:

 

 

.multicolumn-card__info {
    padding: 30px !important;
}

 

Then you go to sections/multicolumn.liquid file and add the code:

Screenshot.png

Code:

 

{%- if block.settings.title != blank or block.settings.text != blank -%}
                <div class="multicolumn-card__info">
                  {%- if block.settings.title != blank -%}
                    <h3>{{ block.settings.title | escape }}</h3>
                  {%- endif -%}
                  {%- if block.settings.text != blank -%}
                    <div class="rte">{{ block.settings.text }}</div>
                  {%- endif -%}
                </div>
              {%- endif -%}

 

If it helped you solve your issue, please mark it as a solution for me. Thank you and good luck.

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
sisaul
Explorer
55 0 16

Hi @LitCommerce

It adds the padding back and unwanted whitespace next to the image.
Is there some kind of a workaround to only use padding on the text?

Thank You in advance

sisaul
Explorer
55 0 16

Hello @dmwwebartisan

Did you get the invitation?
The request code is 3872 as well.

Thank you in advance!

LitCommerce
Astronaut
1236 270 267

Hi @sisaul,

Did you change the code in sections > multicolumn.liquid file like my instructions?

Just you change the code in the file, it will display fine.

Or you can create my staff account, I will help you change it quickly.

Hope it helps!

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
sisaul
Explorer
55 0 16

Hi @LitCommerce

Still can't seem to get it working. I think I need your details to add you as staff member, can you send them please?

Thank you in advance!

LitCommerce
Astronaut
1236 270 267

Hi @sisaul,

I sent you a message, please check it

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
LitCommerce
Astronaut
1236 270 267

This is an accepted solution.

Hi @sisaul,

I have changed it:

Screenshot.png

like my previous tutorial, just add it, everything will display fine.

If it helped you solve your issue, please mark it as a solution. Thank you and good luck.

 

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
sisaul
Explorer
55 0 16

Hi @LitCommerce 


It works exactly as I wanted it to. 
Thank you so much!