Solved

Reduce margins/padding in Flow Theme various locations

meld78
Shopify Partner
52 0 9

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


And also above the Accordion/FAQ section

meld78_1-1699236391455.png

 

 

Accepted Solutions (2)
theycallmemakka
Shopify Partner
1384 307 335

This is an accepted solution.

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

 

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

View solution in original post

theycallmemakka
Shopify Partner
1384 307 335

This is an accepted solution.

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

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

View solution in original post

Replies 13 (13)

theycallmemakka
Shopify Partner
1384 307 335

Hi @meld78 ,

 

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

 

Thank you

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

meld78
Shopify Partner
52 0 9

Thank you, I appreciate this.

 

https://islandlab.com.au/ 

 

Password: frield

theycallmemakka
Shopify Partner
1384 307 335

This is an accepted solution.

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

 

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

meld78
Shopify Partner
52 0 9

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

theycallmemakka
Shopify Partner
1384 307 335

This is an accepted solution.

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

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

meld78
Shopify Partner
52 0 9

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

theycallmemakka
Shopify Partner
1384 307 335

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_1-1699245440949.png

makkaomakka_2-1699245482991.png

 

 

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

meld78
Shopify Partner
52 0 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

 

theycallmemakka
Shopify Partner
1384 307 335

@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

 

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

meld78
Shopify Partner
52 0 9

Thank you. this one?

meld78_0-1699247391169.png

 

theycallmemakka
Shopify Partner
1384 307 335

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

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

meld78
Shopify Partner
52 0 9

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

 

theycallmemakka
Shopify Partner
1384 307 335

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

 

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com