As the picture above shows i want to delete the white space above and below the price + free shipping above is judeme review widget and bellow is add to cart button. thank you so much!
Topic summary
Goal: remove excess white space around the product price, between the Judge.me reviews widget (above) and the Add to Cart button (below). A screenshot was provided; store URL and a password were shared for context.
Proposed approaches:
- Inspect the elements and reduce/remove margins and padding on the relevant product blocks.
- Theme CSS edit: in base.css/style.css/theme.css, set margin-top to 0 on the list element with classes “ul.icon-with-text.icon-with-text–vertical.list-unstyled”.
Final outcome: the issue was resolved by editing base.css and adding “display: inline-block” to the relevant elements, which removed the unwanted spacing. The exact elements were not specified, but the change addressed the gap around the price.
Status: resolved; no further action requested.
Notes: Solution involved direct CSS tweaks in the theme. Shared images/screenshots were used to illustrate the spacing problem.
Without providing a link it is hard to tell.
A possible solution would be to inspect the element, and reduce or remove any margin and padding that each product-block may have.
1 Like
1 Like
Hi @hydrationhound ,
Try this one.
- From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
- Find the theme that you want to edit and click on “Actions” and then “Edit code”.
- In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
- And Save.
ul.icon-with-text.icon-with-text--vertical.list-unstyled {
margin-top: 0px;
}
Result:
I hope it help.
i fixed it by going into base.css and adding display: inline-block to both