How do I decrease of the text box here:
My URL is cheffings.net
Topic summary
A user seeks to reduce the height of an image banner text box specifically on mobile devices.
Two solutions provided:
Solution 1 (TikitaTech):
- Navigate to Admin > Edit Code > section-image-banner.css (line 335)
- Add
padding: 4rem 3.5rem;under the.banner:not...class within a mobile media query (@media screen and (max-width: 749px)) - Adjust padding values (e.g., from 4rem to 2rem 3.5rem) to decrease box height
- Includes code snippet and screenshot showing exact placement
Solution 2 (BSSCommerce-B2B):
- Go to Shopify Admin > Online Store > Theme > Edit code
- Locate theme.liquid file
- Insert custom CSS code above the
</body>tag - Includes code snippet for implementation
Both approaches use CSS modifications targeting mobile viewports to control the banner text box dimensions without affecting desktop display.
Hi @lukafernada !
You can decrease the size of the box by going to Admin > Edit Code > section-image-banner.css: (line 335)
Adding padding: 4rem 3.5rem**;** under .banner:not... class allows you to decrease the size from 4rem of padding and make the box’s height smaller for mobile only:
@media screen and (max-width: 749px) {
.banner--mobile-bottom:not(.banner--stacked) .banner__content {
order: 2;
}
.banner:not(.banner--mobile-bottom) .field__input,
.banner--mobile-bottom:not(.banner--stacked) .banner__box.color-background-1 {
background: transparent;
padding: 4rem 3.5rem;
}
}
As an example, changing the padding to 2rem 3.5rem will give you:
Hope this helps!
Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code
Step 2: Search file theme.liquid
Step 3: Insert this code above
Result:
If it helps you, please like and mark it as the solution.
Best Regards 