Hello!
I would like to remove the extra spaces and limit the gaps between the sections on my landing pages.
Could you help me with this?
Thank you in advance for your help!
Hi @supporths Please add the code in your theme.css/base.css/index.css whichever is available in your theme.
div#ImageWithText--template--21431105618205__9900b124-0ef4-49e1-b353-d578ba70a491 {
padding: 10px !important;
}
div#ImageWithText--template--21431105618205__cdd55f54-1fa2-4b72-887c-c64252f9ba16 {
padding: 10px !important;
}
.rich-text__text.rte.scroll-trigger.animate--slide-in {
margin: 0px !important;
}
You may find this code in theme.css/base.css/index.css whichever is available in your theme.
If you are not sure where is your theme.css file please follow the steps:
- Login in shopify admin.
- Click on the Online Store.
- Then click on the button next to Customize in live Theme.
- Click Edit Code.
- Search theme.css/base.css/index.css in the code in left hand side.
- Add the code in the bottom of the file
Result:
If you will unable to implement the same then I’m happy to do this for you, let me know. I can implement the code changes so that this will work well for you.
Hopefully it will help you. If yes then Please don’t forget hit Like and Mark it as solution!
Best Regards
Sahil
Hi @supporths ,
You can try this code by following these steps:
Step 1: Go to Online Store->Theme->Edit code.
Step 2: Search file theme.liquid
Step 3: Paste the below code at the bottom of the file → Save
Hope my solution works perfectly for you!
Best regards,
Oliver | PageFly
Hi @supporths
check this one.
- From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
- Find the theme that you want to edit and click on “Actions” and then “Edit code”.
- In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
@media only screen and (max-width:749px){
div#ImageWithText--template--21431105618205__9900b124-0ef4-49e1-b353-d578ba70a491 {
padding-bottom: 1rem !important;
}
div#ImageWithText--template--21431105618205__cdd55f54-1fa2-4b72-887c-c64252f9ba16 {
padding-top: 1rem !important;
}
}
- And save.
- Result;
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
Hi I am having the same issue. I’ve tried every code and nothing works. Using the ride theme as well. Trying to make the banner with no space top or bottom.
Hi @dani2024
As I check your store the space above the banner is your announcement bar. The font color change into white.
You can fully remove it on the theme editor. Or add color on it.
- From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
- Find the theme that you want to edit and click on “Actions” and then “Edit code”.
- In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
slideshow-component.announcement-bar * {
color: red;
}
- And Save.
Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!
Unfortunately, that isn’t white space you made that white and red. I’m actually referring to the space below the banner. I entered the codes but it appears its messed up the. Mobile view. It seems like it is pushed up. If you look below the image banner there’s a large white space. Thank you for your reply.
