How to reduce the gaps in Retina theme homepage

Store Design
, ,
1

Hi i need to reduce the spacing between blocks on Retina theme homepage. I am moving from an old theme (4.2) to the latest version. Previously I managed to change the code to reduce the white gaping to make it more natural and less obvious but can’t remember how I did it previously and think the set up has now changed. Can anyone point me to the right area to do this please? My website is mydreampartyshop.com but it is the unpublished new version that I am trying to edit. The current website is an old version of retina and the spacing is fine.

1 Like
2

@Suzanne_Evans ,

Hello,

Can you provide me the store URL ?

3

@Suzanne_Evans

Please share your store URL!

Thanks!

4

its mydreampartyshop.com but the current live version is fine it is the unpublished new version of Retina 6.2 that I am trying to amend so that the gaping is like the live version.

5

@Suzanne_Evans ,

Can you share the screenshot ?

6

Yes see attached. Extra wide white space either side of each block.

Suzanne_Evans_0-1668591842561.png
Suzanne_Evans_0-1668591842561.png878×701 539 KB

Suzanne_Evans_1-1668591884208.png
Suzanne_Evans_1-1668591884208.png873×669 309 KB

Suzanne_Evans_2-1668591912392.png
Suzanne_Evans_2-1668591912392.png878×646 47.4 KB

7

@Suzanne_Evans

Please share your store URL!

Thanks!

8

Yes I have done several times see my other replies - www.mydreampartyshop.com but the theme I am working on is not live. See screen shots further down.

9

www.mydreampartyshop.com the theme is not live

10

@Suzanne_Evans

Please share preview URL not live URL

11

https://mydreampartyshop.com/?_ab=0&_fd=0&_sc=1 - is that what you mean?

12

@Suzanne_Evans

  1. For the theme that you want to share, click the … button to open the actions menu, and then click Preview.
  2. On the preview bar at the bottom of the page, click Share preview. …
  3. Click Copy link to copy the link to your clipboard.
  4. Paste the link into emails, chats, or on social media to share.
13

Thanks for explaining! https://hibfkg0y50qq78lk-1675067507.shopifypreview.com

14

Hi @Suzanne_Evans ,

This is Victor from PageFly - Advanced Page Builder. I would love to give you some recommendations

  • Go to Online Store->Theme->Edit code
  • Asset-> theme.css paste the below code at the bottom of the file
section,footer{

margin-top:0 !important;

margin-bottom:0 !important

}

PageFlyVictor_0-1668659391687.png
PageFlyVictor_0-1668659391687.png1366×768 237 KB

PageFlyVictor_1-1668659391639.png
PageFlyVictor_1-1668659391639.png1366×768 212 KB

Hope my solution works perfectly for you!

Best regards,

Victor | PageFly team

1 Like
15

Brilliant thanks so much that has removed all the gaps for me and then I have added in a divider in the places where I needed a gap. Really appreciate your help.

16

Hi @Suzanne_Evans ,

You’re most welcome!

I’m really glad to hear that it worked perfectly on your end :blush: