HOW TO MAKE HOMEPAGE IMAGE FULL SCREEN ON MOBILE? (Dawn theme)

Solved

HOW TO MAKE HOMEPAGE IMAGE FULL SCREEN ON MOBILE? (Dawn theme)

Perziamalayeri
Excursionist
54 0 10

Hello!

 

I'm new to shopify! I have no experience with coding. 

Could you please help me? I am using the "Dawn" theme. 

 

I used this to make my header transparent and it worked well!

https://jotting.com/shopify/how-to-make-dawn-theme-header-transparent

 

But: I would like to make the homepage image appear full screen on mobile. ( see example )

I would like to have a full screen image appear not only on desktop but also on mobile.

How do I do this?

 

My site URL: https://perziamalayeri.myshopify.com

Password: perzia 

 

 

Thank you!

 

Perzia 

Accepted Solution (1)

Raymond_Matthew
Shopify Partner
19 1 6

This is an accepted solution.

@media screen and (max-width: 749px) {
  .banner--large:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
     min-height: 100vh; 
  } 
}

 

add the code above to your css

View solution in original post

Replies 9 (9)

Dasola_Expert
Visitor
2 0 0

I want to check your site and is not launch yet, and am not able to see it. can you check your store and let me know where to render help

sikemi139@gmail.com
Perziamalayeri
Excursionist
54 0 10

I removed the password. is it possible for you to see it now?

Thanks!!

Perziamalayeri
Excursionist
54 0 10

Hi! I removed the password. please see if you can see my website now?

 

Thanks!

 

Perziamalayeri
Excursionist
54 0 10

hi! Thanks so much for reply. Can you see it now?

Raymond_Matthew
Shopify Partner
19 1 6

This is an accepted solution.

@media screen and (max-width: 749px) {
  .banner--large:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
     min-height: 100vh; 
  } 
}

 

add the code above to your css

Perziamalayeri
Excursionist
54 0 10

How do I do this? Where is my css? 

I tried putting it above the base.css file in Assets folder. But It doesn't work.

 

Thankyou Raymond

Perziamalayeri
Excursionist
54 0 10

Thank you!!! I added this Below: section-image-banner. NOT above!

This worked then. Thanks again.

 

nick_
Visitor
1 0 0

Where exactly did you paste this? Under which file? ANY help is appreciated! 🙂 

musicmick1
Visitor
1 0 0

I'd like to know this too. Did you ever find out? That page is exactly what I want to do and I get copying the css but where to put it and find the actual file is what I can't find, unless I'm missing something obvious.