Solved

How can I eliminate spaces between my content blocks?

Jferguson1
Explorer
80 3 6

Hi there,

 

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

 

Screenshot 2024-02-23 at 10.20.07.png

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

password - help

 

many thanks!

Accepted Solutions (3)
techlyser_web
Shopify Partner
1635 301 322

This is an 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>

techlyser_web_0-1708698514135.png

 


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

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com

View solution in original post

Jferguson1
Explorer
80 3 6

This is an accepted solution.

Screenshot 2024-02-23 at 14.54.36.png

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

View solution in original post

techlyser_web
Shopify Partner
1635 301 322

This is an 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>

techlyser_web_0-1708700754656.png

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

 

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com

View solution in original post

Replies 19 (19)

shubhamSharma
Shopify Partner
130 25 27

hi @Jferguson1 

remove the gap of images than upload

in this region your image create gap between  content blocks

shubhamSharma_0-1708687932860.png

 you try this image 

shubhamSharma_1-1708688244319.png

 

thank you 

S.sharmaJi
Jferguson1
Explorer
80 3 6

password is help. thanks

Jferguson1
Explorer
80 3 6

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
Explorer
80 3 6
Jferguson1
Explorer
80 3 6

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

 

thanks

Jferguson1
Explorer
80 3 6

no 

Jferguson1
Explorer
80 3 6

the link literally works. 

techlyser_web
Shopify Partner
1635 301 322

Hello @Jferguson1 
Use this image
ENTER_EMAIL8-svg (1).jpg

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
Jferguson1
Explorer
80 3 6

Screenshot 2024-02-23 at 14.10.57.png

 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: 

Screenshot 2024-02-23 at 14.12.15.png

 thanks

techlyser_web
Shopify Partner
1635 301 322

This is an 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>

techlyser_web_0-1708698514135.png

 


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

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
Jferguson1
Explorer
80 3 6

Screenshot 2024-02-23 at 14.51.19.png

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

Screenshot 2024-02-23 at 14.52.15.png

Jferguson1
Explorer
80 3 6

This is an accepted solution.

Screenshot 2024-02-23 at 14.54.36.png

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

techlyser_web
Shopify Partner
1635 301 322

This is an 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>

techlyser_web_0-1708700754656.png

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

 

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
Jferguson1
Explorer
80 3 6

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

 

thanks!

techlyser_web
Shopify Partner
1635 301 322

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

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
techlyser_web
Shopify Partner
1635 301 322

@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>

techlyser_web_0-1708702067453.png

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

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
Jferguson1
Explorer
80 3 6

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

Screenshot 2024-02-23 at 15.45.50.png

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

Screenshot 2024-02-23 at 15.49.28.png

techlyser_web
Shopify Partner
1635 301 322

@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>

techlyser_web_0-1708704510319.png

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

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
Jferguson1
Explorer
80 3 6

Hi @techlyser_web 

 

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