How to change (reduce) padding on multirow section on mobile only (Dawn Theme)

[CameronO]

I would like to reduce the space between the image and the heading text on mobile only. Aswell as being able to adjust the border radius for this section only. Thanks in advance.

[BSS-TekLabs]

• Here is the solution for you @CameronO
• Please follow these steps:

1. Go to Online Store → Theme → Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before and press ‘Save’ to save it

• Here is the result you will achieve:

• Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.

[CameronO]

Thanks that worked great, how do i also reduce the border radius?

[polishedCode]

Hey @CameronO

• Open Theme Customizer:

  • Go to the Shopify admin dashboard.
  • Navigate to ‘Online Store’ > ‘Themes’.
  • Find the Dawn theme and click on ‘Customize’.

• Access Theme Section Settings for Custom CSS:

  • In the theme customizer, click on the multi row section
  • Look for a section labeled '‘Custom CSS’ at the bottom of the section.

• Add the following code:

@media (max-width: 768px) { /* Targets screens smaller than 768px */
.image-with-text__content {
  padding-top: 5px;
}
.image-with-text__text{
  margin-top:5px;
}
}

Adjust padding and margin as needed.

This should reduce the spacing only on mobile and only for that section.

[polishedCode]

Adjust code to the following

@media (max-width: 768px) { /* Targets screens smaller than 768px */
.image-with-text__content {
  padding-top: 5px;
}
.image-with-text__text{
  margin-top:5px;
}

.image-with-text__media{
border-radius:20px;
}
}

Adjust border radius as needed.

[BSS-TekLabs]

Please try this ccode @CameronO