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 -%}
                <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.

[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

[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 · Accepted solution]

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!

[sisaul]

Hello @dmwwebartisan, 

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

Thank you in advance!