Banner 2 - to make without full screen option

[IraKarpova]

Hello!

Hope you can help me! I wanted to adapt my image banner for mobile version and make it full screen by using following code:

.banner { height: 100vh; // vh mean viewport height and will fit to every screen }

It worked, but for first and second banners. I need this option only for first one and stay second banner without full screen image adapt.

[ThePrimeWeb]

Hey @IraKarpova ,

Can I have the link to the store?

[IraKarpova]

Here is my website: https://www.karpovastudio.com/

[IraKarpova]

It’s important to say that I need this adapt only for mobile version.

To sum up, on mobile version first banner is full screen, but second is normal. For lap top both should be full screen.

Hope it possible

Thanks for help!

[ThePrimeWeb]

Hey @IraKarpova ,

Just replace the code you had above with this

[ThePrimeWeb]

Ah ok, then don’t copy the one below, you didn’t tell me this earlier!

[IraKarpova]

It worked, thanks a lot! But second banner is still little cropped. Is it possible to fix as well?

[ThePrimeWeb]

No no, don’t use that code. I didn’t know about the mobile and desktop’s seperate requirements. I replied your latest message above.

Use this instead and please remove the one you already have (Mine and yours both).

[IraKarpova]

Sorry, my bad for didn’t explain all clear. But it still good even this way, the only thing is second banner is still little cropped

[ThePrimeWeb]

Hey @IraKarpova ,

This thread is messy now . My LATEST reply is here. The code above this is the final code you need to use.

And fyi, this is what happens if you don’t allow the image to crop, it’ll leave whitespaces everywhere so it can fit the whole image on a small screen. I suggest you let it adapt the way it is doing now.

[IraKarpova]

I pasted it but still look the same as with previous. Bellow I added screenshots how second banner looks on laptop and mobile

[IraKarpova]

Thank you sooo much! It was very helpful!