Dawn - Adjusting Text In Bold & Center + Radius

[Alex087]

Hi,

I want to apply these changes only on the first multicolumn of my product page(image below)

• Put the text in bold & in the center of each column

• adding a radius to each column

• adjusting the space between each column

• adjusting the space between the image & the title

• reducing the size of these multicolumn on mobile

Thanks in advance for your help!

Alex

[Made4uo-Ribe]

Hi @Alex087

I think some of this are done. Can you pull them out so we can do the other that its not yet done? Thanks!

[Alex087]

hi @Made4uo-Ribe

actually i think not of them are done, I want only to adjust this multicolumn. there was a problem with the previous add, I removed the old css (i think)

thanks for your help

[PageFly-Oliver]

Hi @Alex087 ,

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at the bottom of the file → Save

#shopify-section-template--19674055147849__dafd7543-5aa3-42c4-b9cc-63382952445e
 .multicolumn-card.content-container {
    border-radius: 10px;
}
#shopify-section-template--19674055147849__dafd7543-5aa3-42c4-b9cc-63382952445e
 .multicolumn-card h3.inline-richtext {
    text-align: center;
    font-weight: bold;
}

Hope my solution works perfectly for you!

Best regards,

Oliver | PageFly

[Alex087]

hi @PageFly-Oliver thank you!

Would you know how to reduce the space bet the image & the title?

& also how to reduce the size of the multicolumn on mobile?

Thanks in advance!

Size from this

to this

[Made4uo-Ribe]

Oh, I see cause im basing on what I see on the multicolumn. I edit in your latest comment.

• 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-card__info {
    padding-top: 0px;
}
@media only screen and (max-width: 750px){
.page-width.section-template--19674055147849__dafd7543-5aa3-42c4-b9cc-63382952445e-padding.isolate.scroll-trigger.animate--slide-in {
    width: 50%;
}
}

• And Save.
• Result:
• 

[Alex087]

hi @Made4uo-Ribe thanks for your answer.

I have some issues:

• the code you just gave didn’t change anything about the space between the image & the title of each column.

• On mobile, the code reduced the size but now it’s not fitting the edge (I understand the idea of reducing the width but can’t we just reduce the height of the multicolumn, maybe with padding?) this website did it well https://bleame.com/

Thanks in advance Mad4

[PageFly-Oliver]

I checked but I see it worked. you can confirm

[Alex087]

hi @PageFly-Oliver it works! thanks