I want to change the margins and move the buttons closers to each other just on this specific sectio

[deluc004]

I need the review widget closer to the button and i would like the length of the first button to be almost full, and to make the review widget the same size as the button. Also how do i make it so just the review part is only viewed on mobile.

Theme: Focal 

https://flowpure.co.uk/pages/t

What i want to achieve: identical to this, even the review widget not to be full length

 

[Sweans]

Hi @deluc004 ,

If you want to change the width of Shop Now button,

->Go to your online store.
->Select Theme.
->Click Customize.
-> then select the section you want to edit.

->Scroll down on the right side to find the custom CSS section, and paste the following code:

#shopify-section-template--19892489224459__rich_text_9mxdyU .button-wrapper .button.button--primary{
width:100%;
}

if you want to reduce the gap between the review bar and shop now button, select the review widget and find custom css section and paste the following code:

@media only screen and (max-width: 750px) {
#shopify-section-template--19892489224459__1721249464e428490b{
margin-top: -20px;
padding-inline: var(--container-gutter);
}
}

#shopify-section-template--19892489224459__1721249464e428490b{
margin-top: -30px;
padding-inline: var(--container-gutter);
}

if you need to hide the review bar on devices other than mobile use this css code:

@media only screen and (min-width: 768px) {
#shopify-section-template--19892489224459__1721249464e428490b{
display:none;
}
}

Result:-

If you need further assistance, feel free to reach out!
I hope this helps! If it does, please like it and mark it as a solution!

Regards,

Sweans