I Want To Reduce Padding From Header And From The Middle Of Search bar & Images.
My URL:- driptrove.com
Topic summary
A user seeks to reduce padding in two areas of their Shopify store: the header section and the space between the search bar and images.
Proposed Solution:
A PageFly support representative provides custom CSS code to address the padding issues. The implementation involves:
- Navigating to Online Store → Theme → Edit code
- Locating the theme.liquid file
- Pasting CSS code before the closing tag
The CSS targets specific elements:
.announcement-barwith 8px padding#shopify-section-pxs_image_with_text_overlay_NTYjkwith 10px top margin (for screens max-width 767px)
The solution includes a screenshot showing code placement. The discussion appears resolved with the custom CSS approach, though user confirmation of success is not shown.
Hi @Emiway
This is Henry 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.liquid
Step 3: paste bellow code in tag → save.
@media (max-width: 767px){ .announcement-bar { padding: 8px !important; } div#shopify-section-pxs_image_with_text_overlay_NrYTjk { margin-top: 10px !important; }}
Hope that my solution works for you.
Best regards,
Henry | PageFly
1 Like