Dawn 2.5 remove whitespace between sections and resize multicolumn width

[sisaul]

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:

Thank you in regards

[KetanKumar]

@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;
}
}

[sisaul]

Hi @KetanKumar ,

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

[LitCommerce]

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!

[sisaul]

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]

@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;
}

[sisaul]

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?

Thank you in advance!

[dmwwebartisan]

@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.

[sisaul]

Hi @dmwwebartisan

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

Thank you in advance!

[dmwwebartisan]

@sisaul

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

[sisaul]

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]

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:

Code:

{%- if block.settings.title != blank or block.settings.text != blank -%}
                
                  {%- if block.settings.title != blank -%}
                    ### {{ block.settings.title | escape }}
                  {%- endif -%}
                  {%- if block.settings.text != blank -%}
                    {{ block.settings.text }}

                  {%- endif -%}
                

              {%- endif -%}

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

[sisaul]

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]

Hello @dmwwebartisan ,

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

Thank you in advance!

[LitCommerce]

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!

[sisaul]

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]

Hi @sisaul ,

I sent you a message, please check it

[LitCommerce]

Hi @sisaul ,

I have changed it:

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.

[sisaul]

Hi @LitCommerce

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