Shopify themes, liquid, logos, and UX
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
Solved! Go to the solution
This is an 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.
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;
}
}
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!
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.
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;
}
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!
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.
Hi @dmwwebartisan
It removed the padding but is it possible to place the text between those red lines?
Thank you in advance!
add me as a staff member I will try to fix your problem.
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?
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.
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
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!
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!
Hi @sisaul,
I sent you a message, please check it
This is an 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.
Hello @dmwwebartisan,
Did you get the invitation?
The request code is 3872 as well.
Thank you in advance!
Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024