How can I eliminate spaces between my content blocks?

[Jferguson1]

Hi there,

can someone help me close the gaps between my content blocks:

https://tryy.co.uk/pages/email-sign-up

password - help

many thanks!

[shubhamSharma]

hi @Jferguson1

remove the gap of images than upload

in this region your image create gap between content blocks

you try this image

thank you

[Jferguson1]

password is help. thanks

[Jferguson1]

Hi, i changed the image but this did not improve the look of the store - as the image/text is less centred and there is still bottom padding and a margin between the 2 content blocks.

thanks

[Jferguson1]

https://tryy.co.uk/pages/email-sign-up

password - help

[Jferguson1]

or just https://www.tryy.co.uk and click through to the page in question.

thanks

[Jferguson1]

no

[Jferguson1]

the link literally works.

[niraj_patel]

Hello @Jferguson1
Use this image

[Jferguson1]

i used the image you sent and this is how it now looks.

This is an image of what I want the page to look like:

thanks

[niraj_patel]

@Jferguson1
I have done mistake to understand, Sorry for that.

replace image with your image

You can add code by following these steps

1. Go to Online Store → Theme → Edit code.

2. Open your theme.liquid file

3. Paste the below code before on theme.liquid

@media only screen and (max-width:767px){ .newsletter.center { margin-top: -18px !important; } }

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[Jferguson1]

i have inserted the code and this is how the page looks:

[Jferguson1]

I have updated the value to -100 and it looks great thank you - i just need to sort out the bottom padding now.

[niraj_patel]

@Jferguson1

You can add code by following these steps

1. Go to Online Store → Theme → Edit code.

2. Open your theme.liquid file

3. Paste the below code before on theme.liquid

@media only screen and (max-width:767px){ .section-template--21073429922132__newsletter_UYq3RX-padding { padding-bottom: 74% !important; } }

• Was my reply helpful? Click Like to let me know!
• Was your question answered? Mark it as an Accepted Solution.

[Jferguson1]

wow you the best - look perfect. Do i need to do anything for desktop viewing? as desktop version looks a bit weird atm.

thanks!

[niraj_patel]

@Jferguson1
Firstly please like and accept my all solution.
I’m Working on desktop view.

[niraj_patel]

@Jferguson1
Desktop View:

You can add code by following these steps

1. Go to Online Store → Theme → Edit code.

2. Open your theme.liquid file

3. Paste the below code before on theme.liquid

@media only screen and (max-width:990px){ .newsletter__wrapper>*+* { margin-top: -7rem !important; } .section-template--21073429922132__newsletter_UYq3RX-padding { padding-bottom: 51% !important; } }

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[Jferguson1]

Hi, thanks for you reply but i dont think anything changed:

this is how id want the page to look on desktop, thanks:

[niraj_patel]

@Jferguson1

You can add code by following these steps

1. Go to Online Store → Theme → Edit code.

2. Open your theme.liquid file

3. Paste the below code before on theme.liquid

@media only screen and (max-width:990px){ .newsletter__wrapper>*+* { margin-top: -7rem !important; } .section-template--21073429922132__newsletter_UYq3RX-padding { padding-bottom: 50% !important; } .grid--3-col-tablet .grid__item { width: 100% !important; } .image-with-text__text-item.grid__item { display: none !important; } }

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[Jferguson1]

Hi @niraj_patel

I’ve been trying to edit your code and apply it to other sections on my site, but having a hard time doing so.

I’m trying to close the gap on my homepage (mobile) and on the page after by email gate (mobile).

Would really appreciate your help,

Thanks, Joe