I am using an app to have more variants but need help to reduce the space between these elements on the product page:
It should be 5px but it is way more.
Shop: lumoryofficial.com
Thanks a lot!
1 Like
Hey @nojushh
Follow these Steps:
- Go to Online Store
- Edit Code
- Find theme.liquid file
- Add the following code in the bottom of the file above </ body> tag
<style>
.gpo-group__wrapper.open .gpo-ov-wrapper.horizontal.gpo-oos--strike {
justify-content: unset !important;
}
</style>
RESULT:
If you require any other help, feel free to reach out to me. If I managed to help you then a Like would be truly appreciated.
Best,
Moeed
Hello @nojushh ,
I hope you are doing well!
Copy and paste the below CSS to base.css or theme.css.
.gpo-ov-wrapper{
display:flex;
gap:10px;
}
And it will look like
Feel free to reply to me if you have any questions or message me if you need any help!
Thank you but I want it full width so the boxes are big just 5px between them. Now they are small
Basically the space between class making the space. You can copy and paste my code and it will work for you.
Yes but now space is not 8px
You need to add the !important just like the below code
.gpo-ov-wrapper{
display:flex;
gap:8px !important;
}
And it will work.
You can check the video - https://drive.google.com/file/d/1NdQ1BuURi2NS-AQB62p4GD38PpQhl7_5/view?usp=sharing
Sorry! I didn’t understand. Either the ss is different, but can you please provide the details like is the space changed of the boxes has changed according to your requirement?
Sorry for the delay, I want it like the other brand has is. So all the boxes together are full width and gap between is 10px. Now the gap between the boxes is too big 
1 Like