Padding Between Header and Collections Banner

[beckstead]

How do I go about removing the padding between the header and collection banners?

 

[rajweb]

Hey @beckstead ,

To remove the padding between the header and the collection banners, you'll likely need to adjust the CSS of your website.

Add the following code to your website's custom CSS file or section:

.header-selector {
  margin-bottom: 0; /* Adjust this based on your inspection */
}

.banner-selector {
  margin-top: 0;
}

If you provide more details about your website platform (e.g., Shopify, WordPress, custom HTML), I can give more specific guidance. If possible, you can also share the relevant code for better accuracy.

If I was able to help you, please don't forget to Like and mark it as the Solution!
If you’re looking for expert help with customization or coding, I’d be delighted to support you. Please don’t hesitate to reach out via the email in my signature below—I’m here to help bring your vision to life!

Best Regard,
Rajat Sharma

[beckstead]

The website is on the Shopify platform which I am new too. Which would be the best way to show you the relevant code for that you can take a look?

[rajweb]

@beckstead ,

Custom CSS to change the font style and size:

/* Custom styles for "IN STOCK" section */
#variant-inventory { 
    font-family: 'YourCustomFont', sans-serif; /* Replace with your desired font */
    font-size: 18px; /* Adjust the size as needed */
    color: #333; /* Optional: change text color */
}

/* Custom styles for "Flavour" section */
.variants__label { 
    font-family: 'YourCustomFont', sans-serif; /* Replace with your desired font */
    font-size: 16px; /* Adjust the size as needed */
    color: #555; /* Optional: change text color */
}

.js-single-option-selector {
    font-family: 'YourCustomFont', sans-serif; /* Replace with your desired font */
    font-size: 16px; /* Adjust the size as needed */
    color: #555; /* Optional: change text color */
}

Steps to implement:

Follow These Steps:

1. Online Store > Themes > Edit code

2. Find your theme’s CSS file (under 'Assets' > likely named theme.css , style.css and base.css, or something similar).

3. Add the CSS code above at the end of your stylesheet.

4. Save your changes.

Notes:

-Replace 'YourCustomFont' with the actual font you want to use. You can add Google Fonts or custom fonts in your theme's settings if you want a specific font.

-You can adjust the font-size and color to match your store's style.

-If your font is not showing up, make sure to load the font via CSS or in the theme's settings.

After saving, refresh your product page, and you should see the new font styles for both the "IN STOCK" and "Flavour" sections. Let me know if you need further help!

Thanks

[beckstead]

If it the CSS file isn't under theme.css , style.css and base.css or what could it be under?

[rajweb]

@beckstead ,

If the CSS file isn't named  theme.css, styles.css  or base.css check for files like:

- theme.scss.liquid

- styles.scss.liquid

- main.css

- custom.css

- theme.min.css

Also, check the Assets folder for .css, scss, or .liquid files, or look in the Layout and Templates files for inline styles. Let me know if you find something! 

[beckstead]

I see custom.css under the assets folder.

[rajweb]

Great! Since you found  custom.css under the Assets folder, that's where you can add your custom styles.

Add the following CSS code to cutom.css:

/* Custom styles for "IN STOCK" section */
#variant-inventory { 
    font-family: 'YourCustomFont', sans-serif; /* Replace with your desired font */
    font-size: 18px; /* Adjust the size as needed */
    color: #333; /* Optional: change text color */
}

/* Custom styles for "Flavour" section */
.variants__label { 
    font-family: 'YourCustomFont', sans-serif; /* Replace with your desired font */
    font-size: 16px; /* Adjust the size as needed */
    color: #555; /* Optional: change text color */
}

.js-single-option-selector {
    font-family: 'YourCustomFont', sans-serif; /* Replace with your desired font */
    font-size: 16px; /* Adjust the size as needed */
    color: #555; /* Optional: change text color */
}

 if you found my replies helpful, I would greatly appreciate it if you could like my responses. Your feedback helps me build my profile and continue offering the best service to you. 

thanks

[beckstead]

I was able to change all the fonts but even though I placed a larger font size on the flavour sections it didn't seem to change.

/* Custom styles for "IN STOCK" section */
#variant-inventory {
font-family: 'Bebas Neue', sans-serif; /* Replace with your desired font */
font-size: 18px; /* Adjust the size as needed */
color: #000; /* Optional: change text color */
}

/* Custom styles for "Flavour" section */
.variants__label {
font-family: 'Bebas Neue', sans-serif; /* Replace with your desired font */
font-size: 22px; /* Adjust the size as needed */
color: #000; /* Optional: change text color */
}

.js-single-option-selector {
font-family: 'Bebas Neue', sans-serif; /* Replace with your desired font */
font-size: 22px; /* Adjust the size as needed */
color: #000; /* Optional: change text color */
}

 

[rajweb · Accepted solution]

It sounds like the font size change isn't taking effect on the "Flavour" section, even though you've added the correct CSS. Here are a few things to check and try:

1. Check for Specificity Issues:

If there are other CSS rules with higher specificity, they could override your changes. Try adding more specific selectors:

/* More specific selector for "Flavour" */
.variants-wrapper .variants__label {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 22px; /* Adjust the size as needed */
    color: #000;
}

.variants-wrapper .js-single-option-selector {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 22px; /* Adjust the size as needed */
    color: #000;
}

2. Force Styles with !important:

If the styles are still not applying, you can force them using the !important flag.

/* Force font size change */
.variants__label {
    font-family: 'Bebas Neue', sans-serif !important;
    font-size: 22px !important; /* Adjust the size as needed */
    color: #000 !important;
}

.js-single-option-selector {
    font-family: 'Bebas Neue', sans-serif !important;
    font-size: 22px !important; /* Adjust the size as needed */
    color: #000 !important;
}

Check for Inline Styles or JavaScript Modifications:

Sometimes JavaScript dynamically adds styles, which could be overriding your CSS. Check if any JavaScript on the page is setting the font size or styles inline.

You can inspect the page using Developer Tools (right-click on the page and select Inspect). Look at the "Flavour" section to see which CSS rules are being applied to it and if your styles are being overridden.

After trying these suggestions, refresh the page and see if the changes apply. Let me know if it works!

[beckstead]

That worked thank you.

If I wanted to remove the semi colon and product variation/flavour listing shown below how many I do so?

 

[beckstead]

@rajweb 

Would the code below go under assets.custom.css to remove the padding between the header and the collection banners?

.header-selector {
margin-bottom: 0; /* Adjust this based on your inspection */
}

.banner-selector {
margin-top: 0;
}

[beckstead]

@rajweb 

Would the code below go under assets.custom.css to remove the padding between the header and the collection banners?

.header-selector {
margin-bottom: 0; /* Adjust this based on your inspection */
}

.banner-selector {
margin-top: 0;
}

[rajweb]

@beckstead ,

Yes, you can place the code in your assets/custom.css file (or the equivalent stylesheet file used by your Shopify theme). This CSS will adjust the padding or spacing between the header and collection banners by removing the margins.

Explanation of the Code:

.header-selector {
  margin-bottom: 0; /* Reduces or eliminates spacing below the header */
}

.banner-selector {
  margin-top: 0; /* Reduces or eliminates spacing above the banner */
}

How to Use It:

Follow these steps:

1. Online Store 

2. Themes

3. Edit Code

4. Open the  assets/custom.css file (or the primary CSS/SCSS file for your theme, such as theme.css or theme.scss.liquid).

5. Paste the code at the end of the file.

6. Replace  .header-selector and .banner-selector with the actual class or ID selectors for your header and banner. Use your browser's developer tools (right-click > Inspect) to identify these classes.

Refresh your website and check the spacing between the header and the collection banners.

Thanks

[beckstead]

@rajweb 

When I inspect the header this is what I get.

 

[topnewyork]

Hello,
Please share "Store URL"
Thanks!

[beckstead]

https://the-fitness-group-canada.myshopify.com/

[DaisyVo]

HI @beckstead 

I don't see the issue in your store anymore. Have you fixed it already ?

[beckstead]

The issue still exist.