How can I adjust blank space under sections using custom CSS?

Store Design
, ,
1

Hi, under every section there is automatically this blank white space, is there any code that i can always add in section “Custom CSS” to delete or make this blank space smaller. E.g. under section in image, i want to make it 0pixels, but under another sections i want to make it half smaller, just so i can adjust pixels of it. Is there any code that will be right for it?

Thanks

Web: https://nexaco.co/

Rupert22_0-1711187345411.png
Rupert22_0-1711187345411.png877×797 97 KB

2

Hello @Rupert22 ,

Certainly! You can use custom CSS to adjust the spacing under each section on your website. Here’s an example of how you can achieve this:

/* Adjusting spacing under all sections */
.section {
    margin-bottom: 20px; /* Adjust the value as needed */
}

/* Adjusting spacing under the section with class "image-section" */
.image-section {
    margin-bottom: 0; /* Set the margin to 0 pixels */
}

/* Adjusting spacing under another section with class "another-section" */
.another-section {
    margin-bottom: 10px; /* Set the margin to half of the default value */
}

In this example:

  • The .section selector targets all sections on your website and sets a default margin-bottom of 20 pixels. You can adjust this value to suit your design.
  • The .image-section selector targets the specific section where you want to remove the margin (set it to 0 pixels).
  • The .another-section selector targets another section where you want to reduce the margin by half (set it to 10 pixels).

You can add this custom CSS to your website by inserting it into the “Custom CSS” section of your website’s settings or theme customization options. Make sure to replace .image-section and .another-section with the actual class names of your sections.

Feel free to adjust the pixel values according to your design preferences. If you need further assistance or have any specific questions, please let me know!

3

How to find class names of specific sections?

4

Hi @Rupert22

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

.page-content.page-content–product {

padding-bottom: 0 !important;

}

.index-section {

margin-bottom: 0 !important;

}

Hope that my solution works for you.

Best regards,

Henry | PageFly