How to fit an image from the slideshow banner on the home screen to fit the entire screen?

[HallyuApparel]

I was wondering how to fit an image from the slideshow banner on the home screen to fit the entire screen.

I tried some code from other discussion posts but it hasnt worked for me.

Help would be appreciated. Thank you!

[HallyuApparel]

https://hallyuapparel.com/

Here is the URL,
Thank you for the quick reply.

[Moeed]

Hey @HallyuApparel 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.slideshow__media.banner__media.media.aos-init.aos-animate img {
    object-fit: contain !important;
    background: white !important;
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[HallyuApparel]

Hi Moeed,

It is the full image, however I want the image to fully cover the entire screen instead of that middle portion. Is that possible? Here is an image to show what I want. 

For more clarification, I want it similar to the https://fearofgod.com/ website.

Thank you!

 

[Raj-webdesigner]

add this code in your Edit code > base.css file 

.slideshow.banner .slideshow__slide {
    height: 100vh;
}

[HallyuApparel]

Thank you so much! It finally works.

I have another question however, how can I move the tabs next to my logo more to the left?
The About Us, Shop, etc more to the edge so it looks more natural. 
Also, same with the icons on the right for search, account, etc so it can be more to the right.

Thank you for helping!

[HallyuApparel]

Thank you Raj!

Is there a way I can implement a fullscreen design into the mobile layout? The mobile layout looks off.

Thank you!