Solved

Blank spaces under every section

Rupert22
Excursionist
62 0 6

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

 

RuppJou
Accepted Solution (1)

PageFly-Henry
Astronaut
986 283 230

This is an accepted solution.

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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

View solution in original post

Replies 3 (3)

oscprofessional
Shopify Partner
15868 2373 3074

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!

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
Rupert22
Excursionist
62 0 6

How to find class names of specific sections?

RuppJou

PageFly-Henry
Astronaut
986 283 230

This is an accepted solution.

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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.