Hello,
How can I reduce the distance between these buttons (“Custom content” sections) on my homepage on the mobile version?
Thank you for your assistance in advance.
https://www.yook92.com (password: 692)
Topic summary
Goal: Reduce vertical spacing between “Custom content” sections on the Palo Alto theme’s mobile homepage.
Context: The OP shared a mobile screenshot and store link (with password) showing large gaps between buttons/sections. An image is central to understanding the spacing issue.
Proposed solutions (both involve editing theme.css):
- Approach 1: Add a CSS media query for mobile (screen width ≤ 767px) targeting .rich-text.rich-text–no-image.text-center and set padding: 0 !important; to minimize spacing.
Steps: Online Store → Themes → Edit code → Assets → theme.css → paste at bottom. - Approach 2: Use a similar media query targeting .rich-text–no-image with padding: 20px 0 !important; allowing adjustable spacing as needed.
Technical note: A CSS media query applies styles only on specified screen sizes (here, mobile). Adjusting padding reduces the gap between sections.
Status: No confirmation from the OP yet; effectiveness and preferred padding values remain open. No conflicting viewpoints—both answers suggest the same method with different selectors and padding values.
Hi @YK92
This is Victor from PageFly - Landing Page Builder App
You can try this code by following these steps:
Step 1: Go to Online Store->Theme->Edit code.
Step 2: Search file theme.css
Step 3: Paste the below code at bottom of the file → Save
@media screen and (max-width: 767px){
.rich-text.rich-text–no-image.text-center {
padding: 0 !important;
}
}
Hope that my solution works for you.
Best regards,
Victor | PageFly
1 Like
- In your Shopify Admin go to online store > themes > actions > edit code
- Find Asset > theme.css and paste this at the bottom of the file:
@media(max-width:767px)
.rich-text--no-image {
padding: 20px 0 !important;
}
You can manage padding as per your requirement.
Hope this works well.
Best Regards !