Hi I need help on how I can move up the social media icons so that it’s not being blocked by my rewards pop up on my website via mobile view. Is there any way I can move the padding so it isn’t blocked? Or any other solution? I also wouldn’t mind adding a scroll feature. I attached pictures to the issues I am facing. Please help!!
Topic summary
A user is experiencing a layout issue where social media icons in their website’s mobile menu are being obscured by a rewards popup. They’ve shared screenshots demonstrating the problem and are seeking solutions to adjust padding or add scrolling functionality.
Proposed Solution:
A support team member provided CSS code to resolve the issue by:
- Adding bottom padding (50px) to the social media icons list
- Targeting only mobile screens (max-width: 768px)
- Implementing the fix via the theme.liquid file in Shopify’s code editor
The solution includes step-by-step instructions with screenshots and a ready-to-use CSS snippet. The issue remains pending confirmation from the original poster on whether the fix successfully resolved the problem.
I hope you are well. You can follow our instructions below:
1/ Shopify admin > Online store > Edit code: https://prnt.sc/M4p-gua99Uf4
2/ Search for “theme.liquid” file: https://prnt.sc/b6xveIKe-Rh2
3/ Open the file and search for tag and add the following code above tag: https://prnt.sc/KWtKYyZkDtYJ
Here is the code for Step 3:
{% style %}
@media screen and (max-width: 768px){
.menu-drawer__utility-links > ul.list.list-social.list-unstyled {
padding-bottom: 50px !important;
}
}
{% endstyle %}
Please let me know if it works. Thank you!
Best,
Daisy - Avada Support Team.