Hey, I want to decrease the space where I drew the arrows in the screenshot.
Topic summary
A user seeks to reduce excessive spacing on their product page, specifically around the banner/slideshow area on mobile devices.
Proposed Solutions:
Two support team members offered CSS-based fixes:
-
DaisyVo’s approach: Add media query code to
theme.liquidfile (above</head>tag) targeting.slideshow__text.banner__boxwithpadding-block: 0for screens under 768px width -
LizHoang’s approach: Add CSS to end of
base.cssfile targeting the full banner class selector withpadding: 15px
Both solutions aim to reduce padding on the banner element.
Access Issue:
Another user noted the store’s code access is restricted. The original poster was advised to grant collaborator access through Shopify Admin > Settings > Users and Permissions if external help is needed.
Status: The discussion remains open—no confirmation yet on which solution was implemented or whether the issue was resolved.
Hi @Simon159
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){
.slideshow__text.banner__box {
padding-block: 0 !important;
}
}
{% endstyle %}
Please let me know if it works. Thank you!
Best,
Daisy - Avada Support Team.
Hello @Simon159
You have not allowed access for coding.
how do i allow access
@Simon159
You can send me access from Shopify Admin > Settings > Users and Permissions > Collaborators
Hi @Simon159
- You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file base.css and add this code at the end of the file
.slideshow__text.banner__box.banner--transparent-white.content-container.content-container--full-width-mobile.color-background-1.gradient.slideshow__text--center.slideshow__text-mobile--center {
padding: 15px !important;
}
Result:
Best,
Liz