Reduce margins/padding in Flow Theme various locations

Shopify Discussion
1

Hi there,

Can someone please tell me how to reduce the margins/padding below the product block?

I’m using the Flow theme.

I prefer using custom CSS for those rather than having to update the theme liquid files.

meld78_0-1699236257865.png
meld78_0-1699236257865.png1407×397 108 KB

And also above the Accordion/FAQ section

meld78_1-1699236391455.png
meld78_1-1699236391455.png1408×388 13.7 KB

2

Hi @meld78 ,

Can you provide me with the link to your store? I will review the site and provide solution accordingly.

Thank you

3

Thank you, I appreciate this.

https://islandlab.com.au/

Password: frield

4

Hi @meld78 ,

Try adding this css at the end of base.css file.

div#PageContainer:has(.product-details-wrapper) .visual-navigation__wrapper {
    padding-top: 5px;
    padding-bottom: 5px;
}

.product-details-wrapper {
    padding-bottom: 5px;
}

.main-page-container:has(.product-details-wrapper) {
    margin-bottom: 5px;
}

Regarding Accordion/FAQ section, I counld not find this section on the site. Can you let me know where the FAQ section is?

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,

Makka

5

thank you so much. It’s on the product page for the Essential Home Collection

6

Hi @meld78 ,

Add below css on base.css to remove padding from the Accordion/FAQ section.

#PageContainer:has(#AddToCartForm) .accordion--faq-wrapper {
    padding-top: 0px!important;
}

Thank you

7

thank you. where do I find the base. css?

8

You will have to make changes to the theme. Please follow below step to add code to the base.css file.

makkaomakka_0-1699245419483.png
makkaomakka_0-1699245419483.png1471×516 104 KB

makkaomakka_1-1699245440949.png
makkaomakka_1-1699245440949.png1246×501 36 KB

makkaomakka_2-1699245482991.png
makkaomakka_2-1699245482991.png1632×246 19.4 KB

9

thank you so much for the screenshot. I typed in base to search for it but I can’t find it

meld78_0-1699245672373.png
meld78_0-1699245672373.png326×706 22.6 KB

10

@meld78

It looks like you have theme.css or theme.min.css on your site. Please search for theme.css or theme.min.css. This should be inside assets folder.

makkaomakka_0-1699247254915.png
makkaomakka_0-1699247254915.png157×323 15 KB

11

Thank you. this one?

meld78_0-1699247391169.png
meld78_0-1699247391169.png1891×766 59 KB

12

yes. You can add the new css to the end of this file

13

amazing, thank you so so much!
Would you be able to help me with another small issue please?

The bottom footer of footer bottom has the correct colour settings for the font (I have added the word TEST) and it’s white the copyright and powered by shopify is showing in dark and only visible when hovering over.
would you be able to tell me how I can change that colour, please?

meld78_1-1699248009035.png
meld78_1-1699248009035.png1752×356 9.78 KB

14

Hi @meld78 ,

Seems like you have added the CSS and the padding has been reduced.

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,

Makka