Hi, I was wondering if I could have some code or advice on how to make this multicolumn block full length as well as to be able to change the colour of the grey image border with a hex code and have a border like the blue line in the photo that I can also change the colour of similar to the image borders like the one on my featured product section shown below. thanks so much
Hi @Stagtis
It wouldnt be a good Idea if you full width the multicolumn cause it was design for more columns in the section. We can full width but the result will have a blurry image.
Also this is not one section, you add rich text for the heading in the multicolumn. I try to connect them see chec this code so you can see the result.
From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
Find the theme that you want to edit and click on “Actions” and then “Edit code”.
In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.multicolumn-list__item:only-child {
max-width: 100%;
}
.rich-text__blocks {
max-width: 100%;
border-top: 1px solid #A6FF81;
border-right: 1px solid #A6FF81;
border-left: 1px solid #A6FF81;
padding-top: 20px;
}
.rich-text.content-container.color-background-1 {
padding-bottom: 0px;
}
.multicolumn-card.content-container {
background: linear-gradient(133deg, rgba(250, 220, 54, 1) 7%, rgba(15, 216, 80, 1) 49%, rgba(250, 220, 54, 1) 93%) !important;
}
And save.
Result:
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
sorry i had to use rich text as the padding was off, I will try this now
Hey thanks so much for the solution @Made4uo-Ribe I think I will just make it simpler by adding more multicoloumns so it goes full width. is this the closest thing possible to the border effect?
