image with text overlay, Desktop, mobile & fullsceen.

infinite_ars
Tourist
5 0 1

Hello I am having trouble to make my main image of my home page responisive to fullscreen. 

 

I am currenly using debut theme, and I was able to add a menu in text overlay to be able to add a diffent image in mobile.

infinite_ars_0-1699261730024.png

 

 

Now I want to do the same for fullscreen. This is how it looks in fullscreen. 

infinite_ars_1-1699261830981.png

So I want to add a different picture for fullscreen. 

 

This is the result Im looking for. 

infinite_ars_2-1699261927305.png

 

The website is https://infiniteathletic.com/

 

Please help. 

 

Thanks

 

Replies 5 (5)
Dan-From-Ryviu
Shopify Partner
5593 1026 1056

Go to your Online store > Themes > Edit code > open theme.css or theme.css.liquid file, add this code at the bottom 

media only screen and (min-width: 750px) {
.hero--x-large { height: 1000px !important; }
}

- Helpful? Like and Accept a solution. - Donate: Buy coffee - or Paypal me ❤️
- Ryviu - Product Reviews app, collect consumer photo reviews, import reviews from AliExpress, Amazon, Etsy, Shoppe and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 3 months of Shopify for $1/month. Sign up now

ZestardTech
Shopify Expert
5300 950 1261

Hello There,

 

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > theme.css and paste this at the Bottom of the file:

 

 

.hero__inner {
position: absolute!important;
}

 

ZestardTech_0-1699264693950.pngZestardTech_1-1699264718077.pngZestardTech_2-1699264740230.png

 

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
infinite_ars
Tourist
5 0 1

Hello would be posible to keep the text in the middle? 

 

infinite_ars_0-1699870980924.png

 

PageFly-Richard
Shopify Partner
3653 804 1449

Hi @infinite_ars 

This is Richard from PageFly - Shopify Page Builder App, I’d like to suggest this idea:
Online Store ->Theme ->Edit code
Assets ->Theme.css

 

.hero__inner {
   position: absolute !important;
}

 

Hope you find my answer helpful!
Best regards,
Richard | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

infinite_ars
Tourist
5 0 1

Hello would it be posible to keep the text in the middle? 

 

infinite_ars_0-1699870980924.png