How to remove the white space below the payment button on the Venture theme

Solved
New Member
3 0 0

Hello

I just added trust badges under my payment button on the Venture theme but there is a small white space between the button and the badges and I would like the badges to be directly underneath without this small space (without it being glued either), does anyone know how to fix this?

 

Thanks in advance

 

espace blanc.JPG

0 Likes

Success.

Shopify Expert
323 9 45

You can edit the CSS of either the button, the form container, or the graphic.

 

I wouldn't know the specifics without knowing the URL but you can use Chrome Dev Tools (shortcut on Mac is CMD + Shift + C) to inspect the elements and get the CSS rule that you need to change. From there you can change the margin / padding to see how it looks, then add / update the rule in your theme custom CSS file.

Founder of Speed Boostr - we make Shopify sites faster.
Analyze your site at analyze.speedboostr.com.
I also build custom apps, systems, and automated solutions.
Enjoy the adventure!
0 Likes
New Member
3 0 0

@JoesIdeas wrote:

You can edit the CSS of either the button, the form container, or the graphic.

 

I wouldn't know the specifics without knowing the URL but you can use Chrome Dev Tools (shortcut on Mac is CMD + Shift + C) to inspect the elements and get the CSS rule that you need to change. From there you can change the margin / padding to see how it looks, then add / update the rule in your theme custom CSS file.


Thank you ! I managed to fix this problem by inspecting the elements and modifying in theme.scss.liquid what was a space normally reserved for more payment options (which I didn't activate) 

 

Capture.JPG

0 Likes
Highlighted

Success.

Shopify Expert
323 9 45

Nice, well done.

 

One last thing, I recommend making all custom CSS edits in a new file.

 

For example:

1) Create a file in your Assets folder called custom.scss.liquid

2) Add it in your theme.liquid file under your theme css file:

<head>

<!-- your theme css file call might look like this: -->
{{ 'theme.scss.css' | asset_url | stylesheet_tag }}

<!-- add your custom theme file underneath that to override styles: -->
{{ 'custom.scss.css' | asset_url | stylesheet_tag }}

</head>

Now you can leave your original theme CSS file untouched, and make all customizations in this new file. It will help prevent accidental layout breaks, and prevent your custom CSS from being overwritten if you update your theme in the future.

 

Founder of Speed Boostr - we make Shopify sites faster.
Analyze your site at analyze.speedboostr.com.
I also build custom apps, systems, and automated solutions.
Enjoy the adventure!
1 Like
New Member
3 0 0

All right, I'll do that, thank you very much for the advice

0 Likes