How to optimize banner size for desktop and mobile?

Solved
UzairAli
Tourist
11 0 5

Hey! 

I'm having some issues when it comes to optimizing my banner size to fit mobile & desktop. I have the furtop -v-1-0-0 theme.
I dont know exactly how to put the code, its placement specially but i do know where to go in order to insert the code

I'd appreciate if anybody can assist me. 

Thanks! 

0 Likes
dmwwebartisan
Shopify Partner
9143 2117 2885

@UzairAli 

Please share stroe URL and Screenshot what do you want!

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
0 Likes
UzairAli
Tourist
11 0 5

Dear concerned,
I want to optimize the banner size of my store.
For example:
The size of the banner on desktop can not be same for the mobile banner.
but in my case the moment i update any banner image its the same size being updated for both desktop and mobile which i don't want.
i want it to be rational according to device type.

URL of store:
https://theoils.net/

Pictures are attached below

 Desktop BannerDesktop BannerMobile BannerMobile Banner

Hi @UzairAli 

Let's fix this within 10 seconds. Go to your theme > edit code > style.css or style.scss and paste the following css below. 

@media only screen and (max-width: 575px)
.single-slider {
    height: 390px!important;
    width: 100%;
    background-position: center;
    background-size: cover;
}

This is how, it will look in mobile view. Do let me know if anything requires. 

Ajay_kumar_dev_0-1632387486920.png

 

 

Expert Shopify Developer & Theme customizer
- If the problem is solved remember to click ✅ to Accept Solution
- Press Like ?? if the answer was helpful
- Still, Facing issue, Reach out to me Email :- kmajay8888@gmail.com | Skype :- kmajay888
0 Likes
UzairAli
Tourist
11 0 5

Dear Concerned,
Would you please confirm is this the right way to do?

UzairAli_0-1632388146011.png

Thank you.

0 Likes
dmwwebartisan
Shopify Partner
9143 2117 2885

@UzairAli 

add the following code at the bottom of your assets/theme-responsive.css

@media only screen and (max-width: 575px){
.single-slider {
    height: 390px!important;
    width: 100%;
    background-position: center;
    background-size: cover;
}
}

Thanks!

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
0 Likes

yes

Expert Shopify Developer & Theme customizer
- If the problem is solved remember to click ✅ to Accept Solution
- Press Like ?? if the answer was helpful
- Still, Facing issue, Reach out to me Email :- kmajay8888@gmail.com | Skype :- kmajay888
0 Likes
UzairAli
Tourist
11 0 5

UzairAli_0-1632388894176.png

Below 542? you mean sir?

 

You can include this css in this or add below  542 line

 

Expert Shopify Developer & Theme customizer
- If the problem is solved remember to click ✅ to Accept Solution
- Press Like ?? if the answer was helpful
- Still, Facing issue, Reach out to me Email :- kmajay8888@gmail.com | Skype :- kmajay888
0 Likes
dmwwebartisan
Shopify Partner
9143 2117 2885

@UzairAli 

Add code after line no 542 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
0 Likes