Padding on Home Page between Logo Sections

[MadDogBackdrops]

I have added to Logo sections as we are displaying alot of Logos we have worked for but there is padding between the two section and I would like them closer so to doesnt look like two sections, please help

[rajweb]

Hi @MadDogBackdrops ,

Could you please share your URL so I can check it and make the adjustments to match your preferences?

[MadDogBackdrops]

https://maddogbackdrops.co.nz

Thanks

[rajweb]

Follow these steps:

1. go to Online Store > Themes.

2. Click Actions > Edit code on your active theme.

3. Locate the file named theme.scss.liquid or theme.css under the Assets folder.

Identify the padding or margin between the sections:

• Look for the specific classes or IDs for the logo sections in your Sections or Snippets files.
• If you can't find it, you can apply the following general rule to reduce padding or margin between all sections on the page.
• Add custom CSS: In the CSS file, add the following code at the bottom to target the specific sections and remove the gap:

/* Remove padding between logo sections */
.logo-section + .logo-section {
    margin-top: 0;
    padding-top: 0;
}

/* Optionally reduce padding for other sections as well */
.section {
    margin-bottom: 0;
    padding-bottom: 0;
}
​

• Replace .logo-section with the actual class or ID of the sections you're using for the logos.

[HazemSaber]

Hey @MadDogBackdrops ,

I've checked your website: https://maddogbackdrops.co.nz and  I can see the problem in the logo section above the footer.

Please see the final look here:

You need to do 2 steps:

1. Remove the padding-bottom from the top section on both desktop and mobile. 

padding-bottom: 0;

2. Adjust the padding-top for the bottom section to be 35px to match other logos.

padding-top: 35px;

You can add those rules directly from:

1. The section padding settings if available.

2. The "Custom CSS" section settings from the theme editor.

[Rahul_dhiman]

HEllo @MadDogBackdrops 

Go to online store ----> themes ----> actions ----> edit code ---->theme.css
search this code.

.logo-bar {
list-style: none;
text-align: center;
margin-bottom: -35px;
}

replace with this code

.logo-bar {
list-style: none;
text-align: center;
margin-bottom: -87px;
}

result

If this was helpful, hit the like button and accept the solution.
Thanks

[Dan-From-Ryviu]

Hi @MadDogBackdrops 

Please add this code to Custom CSS in Online Store > Themes > Customize > Theme settings 

.logo-bar__item {
margin: 0 8px 24px !important;
}

[PageFly-Richard]

This is Richard from PageFly - Shopify Page Builder App

Hi  @MadDogBackdrops  Please add code here to fix it:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file theme.liquid
Step 3: Add code above the tag </body>

<style>
#shopify-section-logo_bar_fN8TFL{
 padding-top: 0px !important;
}
</style>

Hope my solution will help you resolve the issue.

Best regards,

Richard | PageFly