Re: image with text overlay, Desktop, mobile & fullsceen.

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
9668 1936 1971

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 solution! Support me! Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

ZestardTech
Shopify Partner
5776 1052 1392

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
4668 1069 1726

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!


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available) 


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