How can I evenly distribute gaps in a layout?

Store Design
1

Gaps.jpg
Gaps.jpg642×197 15.1 KB

Don’t laugh at me but I am this OCD with stuff like this! How can I make gap 2 just as big as gap 1? Not the biggest problem but it is something that is on my mind

If not possible it would also be ok to center the sharing buttons vertically inside the gap.

Thanks in advance for your help!

2

@MDKSocks

yes please add this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
.smart-tabs-wrapper.Rte {
    margin-bottom: 0 !important;
}
3

Hey @KetanKumar

On desktop is looks great, on mobile it looks still the same!

Any idea why it doesn’t change on mobile?

4

@MDKSocks

yes please add this code

@media screen and (max-width: 800px) {
.single-product .grid .product-images, .single-product .grid aside.product-aside {margin: 0px;}
}
5

Absolute hero! Thank you!

6

@MDKSocks

its my peasure to help us