Edit padding size & section lines - Lorenzo Theme

Store Design
, ,

Topic summary

A user working with the Lorenzo theme needs to reduce padding between sections to make them appear unified, specifically around a ratings section and a three-column text area. They also want to remove or recolor thin dividing lines appearing between sections.

Solutions provided:

  • Multiple respondents offered CSS code snippets to address the padding issues
  • Instructions involve editing theme files (theme.css, main.css, or base.css) through Online Store → Themes → Edit code
  • Code targets specific classes like .section-borderable, .text-columns, and .collection-list-grid to remove padding and borders

Key CSS modifications:

  • Setting padding-bottom: 0 on relevant sections
  • Using border-top: 0 !important to remove dividing lines
  • Adjusting padding values (e.g., padding: 40px) for fine-tuning

Current status:

The user requested even further padding reduction after initial solutions were provided. A follow-up code snippet was shared to reduce padding from the reviews section to 40px. The discussion remains active with iterative adjustments being made.

Summarized with AI on November 8. AI used: claude-sonnet-4-5-20250929.
1

Hi,

I am using the Lorenzo theme which doesn’t have anything built in to amend the padding size.

I have two sections which I am trying to reduce padding size to make it appear as if they are one. Above and below my ratings section, is huge padding. I am also hoping to reduce the padding of the three column text section above. Is anyone able to help?

pbr1_0-1719589508723.png
pbr1_0-1719589508723.png1897×473 27 KB

Secondly, I also have some fine lines that appear between different sections. Is there anyway to remove these or re-colour them to match the website background?

pbr1_0-1719589731690.png
pbr1_0-1719589731690.png1897×241 103 KB

https://printbyrob.com/

1 Like
2

Hi @pbr1

This is Henry from PageFly - Landing Page Builder App

You can try this code by following these steps:

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

Step 2: Search file theme.css

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

section {

border: unset !important;

}

.section.section–bordered {

padding: 0 0 80px 0 !important;

}

section.section.text-columns.section–contrast.text-columns–alignment-center {

padding-bottom: 0;

}

Hope that my solution works for you.

Best regards,

Henry | PageFly

3

Hi @pbr1

Check this one.

  1. From you Admin page, go to Online Store > Themes
  2. Select the theme you want to edit
  3. Under the Asset folder, open the main.css(base.css, style.css or theme.css)
  4. Then place the code below at the very bottom of the file.
.section-borderable+.section-borderable>.section--bordered {
    border-top: 0 !important;
}
section.section.text-columns.section--contrast.text-columns--alignment-center.collection-list-grid--columns-3 {
    padding-bottom: 0;
}

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

4

@pbr1 hey, thanks for posting here.
i think best way is customize the theme setting.

5

Hi,

Thanks for the quick response, is it possible to make it even less?

6

Yeah sure, i already take out the padding from the columns section now I’ll reduce from the reivews.

Add this code where you add the 1st code.

.section.section--bordered {
    padding: 40px;
}

And save.

result:

Made4uoRibe_0-1719592224325.png
Made4uoRibe_0-1719592224325.png1582×440 75.8 KB