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!

[niraj_patel · Accepted solution]

@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 </body> on theme.liquid

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

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

[Jferguson1 · Accepted solution]

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

[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 · Accepted solution]

@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 </body> on theme.liquid

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

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 · Accepted solution]

 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 · Accepted solution]

@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 </body> on theme.liquid

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

• 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 </body> on theme.liquid

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

</style>

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 </body> on theme.liquid

<style>
@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;
    }
}
</style>

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