Increase padding for image with text component, mobile view, dawn theme

Store Design

Topic summary

Goal: Increase bottom padding between “image with text” sections on mobile in the Dawn theme, without affecting spacing site‑wide.

Proposed fixes:

  • theme.liquid injection: A reply suggested adding code above , but no code snippet was provided, so the approach is unclear/incomplete.
  • Component-level CSS: In component-image-with-text.css, add:
    .image-with-text__text-item.grid__item { padding-bottom: 20px !important; }
    This targets the image-with-text component specifically, likely closer to the requested scope.
  • Global RTE spacing: In base.css, change
    .rte > *:last-child { margin-bottom: 0px; }
    to
    .rte > *:last-child { margin-bottom: 15px !important; }
    This adjusts bottom margin for the last child in rich text editor content across the site. A screenshot was provided to show the increased spacing result.

Notes:

  • The original ask emphasized mobile-only; the provided CSS snippets did not include a mobile-specific media query.
  • No images/code are essential beyond the provided CSS; one screenshot illustrates the outcome.

Status: The original poster expressed thanks after the solutions, implying resolution, though no single fix was formally marked as accepted.

Summarized with AI on December 25. AI used: gpt-5.
1

Hello! Does anyone know how to increase the bottom padding between each section of the image with text for mobile view? I am using dawn theme.

Verterra_0-1720589108560.png
Verterra_0-1720589108560.png628Ă—1344 566 KB

My store URL is: https://verterra.sg/password, password is VerterraTest123

I was recommended to use this code previously, but hoping not to use it this time because it increases the space for all pages, instead of just this section:

.section + .section {
margin-top: 0 !important;
}

Any other solutions would be welcome. Thanks!

2

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code above the tag

Hopefully it will help you. If yes then Please don’t forget hit Like and Mark it as solution!

1 Like
3

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2 open component-image-with-text.css file

Paste the Code Bottom of file

.image-with-text__text-item.grid__item {
padding-bottom: 20px !important;
}

If you face any issue let me know

Thanks

4

Go to online store ---------> themes --------------> actions ------> edit code------->base.css -----> line number 6749
search this code

.rte > *:last-child {
margin-bottom: 0px;
}

and replace with this code

.rte > *:last-child {
margin-bottom: 15px !important;
}

and the result will be

1.png
1.png425Ă—832 193 KB

If this was helpful, hit the like button and mark the job as completed.
Thanks

1 Like
5

Thank you!

6

Always there to help you.
Thanks