I entered some negative margin to the copyright so it can look tighter to the social media icons. Look fine on desktop but on mobile view the social media icons fall over top of the copyright logo.. How can I have the social media icons maybe decrease the space between them so they wont fall into the next line?
Topic summary
Main issue: Negative margin added to tighten spacing between footer social icons and copyright looks fine on desktop but causes icons to overlap the copyright on mobile.
Context: The problem appears only on small screens. Two screenshots are provided and are central to understanding the overlap behavior.
Proposed fix: A helper suggested adding a CSS media query (max-width: 767px) in base.css to adjust mobile spacing:
- Reduce padding on .list-social__link anchors.
- Remove top padding on .footer__content-top and add 35px bottom margin.
Outcome: The CSS change resolved the overlap, but the icons now appear larger on mobile. The original poster asks how to reduce the icon size.
Status: Partially resolved. Overlap fixed; icon sizing on mobile remains an open question pending further guidance (e.g., size-specific CSS).
Hi @QAPT
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 base.css
Step 3: Paste the below code at bottom of the file → Save
@media (max-width: 767px){
a.link.list-social__link {
padding: 3px !important;
}
.footer__content-top.page-width {
padding: 0 !important;
margin-bottom: 35px !important;
}}
Hope that my solution works for you.
Best regards,
Henry | PageFly
1 Like
hey that worked great, but now the icons are a bit larger… How do I make them smaller?