How to make my slideshow banner fill out the whole screen on mobile?

[HallyuApparel]

Hello,

So I made a separate slideshow banner for desktop and mobile because the slideshow banner for my desktop has text in the actual image because it is easier to customize.
I made 2 different slideshow banners and I inputted custom css from https://websensepro.com/blog/show-different-banner-images-on-mobile-desktop-in-shopify/ so that I can choose what to put for desktop and mobile. So the slideshow banner is different for the mobile and desktop.
So because I did this, the text is not attached to the image for the mobile version, only the desktop. Is there a code that can make the image go fullscreen so it takes up the entire screen on mobile just like how it is on desktop?
Thank you!
The URL is hallyuapparel.com .

[TheScriptFlow]

@media only screen and (max-width: 767px){
.slideshow__media.banner__media.media.aos-init.aos-animate{
object-fit: cover;
    object-position: center;
}
}

To solve this issue. Please first remove the text on Mobile Hero Section. After that upload the image that has text on it. If it is overflow then resize the image something (800px by height) height automatically change when you decrease width. After that it also overflow then use these properties in base.css file.

[Made4uo-Ribe]

Hi @HallyuApparel

Try this one.

1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

@media only screen and (max-width: 749px){
.banner__media.media.scroll-trigger.animate--fade-in img {
    object-fit: fill;
}
}

• And Save.

• Result:

• 

• I noticed you changed it to the default heading for the image banner, but on desktop, the text is still attached to the image. Are you aware that there are many screen sizes? Additionally, when you view it on a tablet, the result on your store appears like this.

• 

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

[HallyuApparel]

Yes, the desktop slideshow image has the text as a part of image because it was easier to customize the text. However on mobile, I didn’t do that because I wanted the whole screen on a phone to be the image similar to how on desktop the whole screen is filled up with the image. I believe using an image with the text attached would somehow ruin that.

Also for your solution, I actually wanted the whole screen to be full on mobile, not for the whole image to show.

So something like the https://fearofgod.com/ on mobile where the whole entire screen in the image with the button in the middle.

Thank you!

[Dan-From-Ryviu]

Hi @HallyuApparel

Please add this code to Custom CSS of the mobile’s slideshow section

.media img {
object-fit: fill;
}

[HallyuApparel]

Hi Dan,

I wanted to image to fill out my whole mobile screen instead of just showing the whole image.

I want it to look like the https://fearofgod.com/ website on mobile.

Thank you!

[Dan-From-Ryviu]

Please add this code to Custom CSS of that mobile section

.banner {
height: 100vh;
}

[HallyuApparel]

Thank you !!