I Have Two Multicolumn But I Want To Make Changes To Just One Multicolumn

Store Design
, , ,
1

Hello,

I have two multi-columns (top and bottom multi-columns as shown below), but I want the image in the top multi-column to fill the width of the multicolumn and for it to be a little closer to the bottom multi-column. Please note that I previously used the code below to adjust the size of the bottom multi-column which I found in this discussion.

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

.multicolumn-card__image-wrapper–half-width {
width: 100% !important;

Charlsy_1-1684877334208.png
Charlsy_1-1684877334208.png399×162 68.1 KB

Please I really need your help in solving this issue. I am also not knowledgeable in coding, so, I will appreciate your step-by-step direction in solving the issue. Thanks

2

Hi @Charlsy

Please provide your website so we can give you the appropriate code

3

This is my website: https://dazzlewears.com/

The password to access the website is Charlesudeh1234.

Thank you

4

Hi @Charlsy

This is Noah from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the

PageFlyNoah_0-1684890455732.png
PageFlyNoah_0-1684890455732.png1920×937 245 KB

Hope this can help you solve the issue

Best regards,

Noah | PageFly

5

Hello @Charlsy ,

You can try to follow these steps:

  • Go to Online Store → Themes → Actions → Edit code
  • Go to Assets folder → base.css file
  • Add the following CSS code to make the image fill the width of the top multi-column:
.top-multi-column img {
  width: 100%;
  height: auto;
}
  • To adjust the spacing between the two multi-columns, you can use margin or padding properties. Add this following code
.bottom-multi-column {
  margin-top: 20px; /* Adjust the value as needed */
}
  • Save and preview

Hope this can help.

Let us know if you need any further support.

Ali Reviews team.

6

Thanks for this. Although it worked, but the code made the top multicolumn image un-clickable. It was clickable initially but not after adding the code.

7

Thanks for this but you didn’t specify where in the base.css file section this code should be inserted. Nonetheless, I added the code at the end of the base.css file but it didn’t work

8

Hi @Charlsy I can see now it works with the Clickable now, is there any issue that i can help to check?

9

Hi @Charlsy

Whatever code you added in your base.css, it will not work. Your base.css has some errors. You need to fix the errors first. You can also try to add the code at the very top of the file