https://f63e08-3.myshopify.com/
Hi,
Since I have made my header transparent the height of the image banner is not ideal.
How can I increase the Height so it covers more of the home screen?
TIA
Topic summary
Goal: Increase the home page hero/banner height in a Shopify store using the Origin theme after making the header transparent, so the banner covers more of the screen.
Proposed solutions:
- Custom CSS: Edit theme.css and set a fixed height on the banner media element (selector: .banner__media.media.animate–ambient.scroll-trigger.animate–fade-in; example height: 1000px). This directly forces a taller banner.
- Theme settings: Adjust the slider/hero height via the theme’s customization controls (a screenshot was shared showing where to change this).
Feedback: The store owner is already aware of the standard customization controls and indicates that approach isn’t what they want. They did not confirm whether the custom CSS solution meets their needs.
Notes: A screenshot was provided to illustrate the theme settings location.
Status: Unresolved. No accepted solution yet. The requester appears to seek a method beyond standard settings; applicability and responsiveness of a fixed CSS height (especially across devices) were not discussed or confirmed.
Hi @LSAccounting ,
I hope you are doing well, I’ve seen your website. Please follow the instructions below:
-
Go to Online Store → Theme → Edit code.
-
Open your theme.css file
-
Paste the below code in the theme.css file
.banner__media.media.animate--ambient.scroll-trigger.animate--fade-in {
height: 1000px;
}
1 Like
@LSAccounting you can manage the slider height from the theme settings:
Unfortunately, this is not what I was looking for. I am aware of the size changes using the standard customisation tools.
1 Like