Re: Image for mobile banner height

Solved

How can I adjust mobile banner height to fill entire screen?

saadrafi
Excursionist
32 0 11

 

i have written code to make separate images for desktop and mobile

desktop looks fine:

from litcommerce  https://community.shopify.com/c/shopify-design/separate-banner-images-on-mobile-and-desktop-dawn-theme/td-p/1362462from litcommerce https://community.shopify.com/c/shopify-design/separate-banner-images-on-mobile-and-desktop-dawn-theme/td-p/1362462

 

from @LitCommerce https://community.shopify.com/c/shopify-design/separate-banner-images-on-mobile-and-desktop-dawn-the...

 

 

 

Now i want mobile one to be longer to fill entire screen for mobile like this:

longer picture for mobilelonger picture for mobilei want the red area to be filled with image banner on mobilei want the red area to be filled with image banner on mobile

 

 

 

 

for this i looked at a code from litcommerce

code 2.PNG

 

 

but it didn't help. please help me

please check my website

 

thoughtbox-pk.myshopify.com

password: shopify123

 

@LitCommerce

@KetanKumar

Accepted Solution (1)

KetanKumar
Shopify Partner
37094 3645 12053

This is an accepted solution.

@saadrafi 

can you try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/section-image-banner.css ->paste below code at the bottom of the file.

@media screen and (max-width: 749px) {
.banner--medium.banner--mobile-bottom:not(.banner--adapt) .banner__media, .banner--medium.banner--stacked:not(.banner--mobile-bottom):not(.banner--adapt)>.banner__media, .banner--medium:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
    height: 54rem;
}
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

Replies 16 (16)

KetanKumar
Shopify Partner
37094 3645 12053

This is an accepted solution.

@saadrafi 

can you try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/section-image-banner.css ->paste below code at the bottom of the file.

@media screen and (max-width: 749px) {
.banner--medium.banner--mobile-bottom:not(.banner--adapt) .banner__media, .banner--medium.banner--stacked:not(.banner--mobile-bottom):not(.banner--adapt)>.banner__media, .banner--medium:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
    height: 54rem;
}
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
saadrafi
Excursionist
32 0 11

Omg thankyou love you

 

saadrafi
Excursionist
32 0 11

@KetanKumar how to lower the container on mobile ?

how to make the  container middle-bottomhow to make the container middle-bottom

KetanKumar
Shopify Partner
37094 3645 12053

@saadrafi 

can you just change value above 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
saadrafi
Excursionist
32 0 11

which value

 

KetanKumar
Shopify Partner
37094 3645 12053

@saadrafi 

can you please change height: 54rem; to height: you value
as you like
 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
saadrafi
Excursionist
32 0 11

that changes the height of the image banner, not the position of the container

KetanKumar
Shopify Partner
37094 3645 12053

@saadrafi 

yes, please let me know where did you container?

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Mark166
Tourist
6 0 3

cef661.myshopify.com

pw:ineuts

Could you help to check, please? The code is not working on my site.

KetanKumar
Shopify Partner
37094 3645 12053

@Mark166 

oh sorry for that issue if possible to share issue images so i will give you proper code

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Mark166
Tourist
6 0 3

Mark166_0-1672471054213.png

It should fill the height in mobile view but it wasn't doing so.

 

Mark166_1-1672471130165.png

I use this code from OP to change the image in mobile view and the code you share to fill the height of the mobile.

 

 

@media screen and (max-width: 749px) {
.banner--medium.banner--mobile-bottom:not(.banner--adapt) .banner__media, .banner--medium.banner--stacked:not(.banner--mobile-bottom):not(.banner--adapt)>.banner__media, .banner--medium:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
    height: 54rem;
}
}

 

 

I also tried to change the height: 54rem to something other value but it is not working on my site. 

 

Mark166_2-1672471641149.png

 

KetanKumar
Shopify Partner
37094 3645 12053

@Mark166 

you have check theme setting for upload different image desktop and mobile 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Mark166
Tourist
6 0 3

I mean I did the same thing as the OP did, the changing image part on mobile and desktop is already working, but your code to change the image banner to fit mobile size didn't work on my website.

I don't understand what you mean:


@KetanKumar wrote:

@Mark166 

you have check theme setting for upload different image desktop and mobile 


That changing image part is already working. The only issue I have is the image still doesn't fit the mobile height on my website after using your code.

Could you please check my website? I have changed another image to differentiate the mobile and website view. Previously I use the same image but I cropped the first image and set it as the 2nd image. Maybe that is the reason you thought that changing image part is not working.

Before:

Mark166_0-1672556262391.png

 

After:

Mark166_1-1672556297093.png

 

Mark166
Tourist
6 0 3

@KetanKumar, could you have a look at my website, please?

KetanKumar
Shopify Partner
37094 3645 12053

@Mark166 

can you please share store url 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Mark166
Tourist
6 0 3

@KetanKumar, I shared the link a few comments before, but here it is:

cef661.myshopify.com

pw:ineuts

Could you help to check, please? The code is not working on my site.