Shopify themes, liquid, logos, and UX
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!
Solved! Go to the solution
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>
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.
This is an 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.
This is an accepted solution.
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>
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
password is help. thanks
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
no
the link literally works.
Hello @Jferguson1
Use this image
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
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>
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.
i have inserted the code and this is how the page looks:
This is an 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.
This is an accepted solution.
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>
wow you the best - look perfect. Do i need to do anything for desktop viewing? as desktop version looks a bit weird atm.
thanks!
@Jferguson1
Firstly please like and accept my all solution.
I'm Working on desktop view.
@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.
Hi, thanks for you reply but i dont think anything changed:
this is how id want the page to look on desktop, thanks:
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.
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
Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024