Can someone help me in showcasing the text on the hero more below, that is perfectly fits in the picture.
This section is made by the app called section.store.
URL is www.ateliercharisma.com
Topic summary
Goal: move the hero banner text lower so it fits the image in a section built with the section.store app (site: ateliercharisma.com). An image was shared showing the current overlay placement.
Proposed fix (CSS):
- Add to theme.css/base.css via Online Store > Edit Code:
@media (max-width:1024px) { .swiper-wrapper .swiper-slide>div { bottom:0; top:auto; transform:unset; left:auto; } } - This targets the hero’s overlay container in swiper slides and anchors it to the bottom on tablet/mobile.
Alternate feedback: Another member confirmed the hero text remains editable in the theme editor and added sample text, sharing two screenshots. They requested a screenshot of any error seen on the merchant’s side.
Status: No confirmation that the CSS change resolves the positioning. The issue may relate to responsive behavior and/or editor usage with the third‑party section.store section.
Next steps:
- Implement the CSS and test across breakpoints.
- If issues persist, share a screenshot/error and clarify whether the problem is text positioning vs. content editing limits.
- Note: Images/screenshots are central for layout context.
You can achieve this by adding this CSS code:
You just need to follow these steps:
- Go to the Online Store
- Edit Code
- Find theme.css / base.css
And past that CSS Code:
@media(max-width:1024px){
.swiper-wrapper .swiper-slide>div { bottom: 0; top: auto; transform: unset; left: auto; }
}
I hope this solution works for you!
If it does, please Like It and Mark It As A Solution, or support me by Buying Me A Coffee to keep me going!
I’m trying to add the text to your store’s hero banner, and it’s still editable, so you can add more text if needed.
Could you please take a look and share with me the screenshot of the error from your end?
Best,
Daisy