Remove Banner from Mobile but not Desktop

WilliamDaza
Tourist
3 0 1

I've been trying to remove the banner homepage image off my Avenue Theme on Mobile version but not Desktop version.

Does anyone have any new piece of code which would work?

Thanks 

Replies 28 (28)

KetanKumar
Shopify Partner
36839 3635 11972

Thanks @WilliamDaza 

Welcome to the Shopify community!
Please share your site URL,
So I will check and provide a solution here.

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
WilliamDaza
Tourist
3 0 1
KetanKumar
Shopify Partner
36839 3635 11972

@WilliamDaza 

Thanks for URL.

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

@media only screen and (max-width: 600px) {
#shopify-section-1549049730457 {
    display: none;
}
}
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
WilliamDaza
Tourist
3 0 1

Fantastic, thank you very much. It works.

 

However, perhaps it would be a better solution to simply make the banner image resize in proportion to the mobile screen.

Would this be possible?

KetanKumar
Shopify Partner
36839 3635 11972

Yes, upload special mobile device image look much batter it can be done custom code can you please send personal message 

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
Michal17
Shopify Partner
835 73 175

Why not it is possible, During the process of uploading your banner, check the below space you will see the desktop size and mobile size, you can easily input the range of the size you want the banner to be.

I think this should also help you to gain what you need to be done, if you did not get it, kindly message me with your store link to do that for you.

 

Thanks.

RobMoore007
Shopify Partner
194 1 20

To clarify:

I have the banner H1 title hidden from everything using custom CSS

I wish to have the banner H1 title shown in mobile only?

https://auchterlonies-com.myshopify.com/

pswd: awskob

Regards
Rob Moore - NEWBY!!
Michal17
Shopify Partner
835 73 175

I just login into your store now and I understand what you are saying but it is not about coding, it is something that you can easily fix by merem.PNG design, You need to study the type of theme used for Shopify and go to the admin, check slides area and collect what you need to fix out.

 

I think this should make sense to you now.

Thanks.

RobMoore007
Shopify Partner
194 1 20

You can see that I have used the custom CSS to remove the banner title here..  

How do I make the banner title visible in MOBILE only ?

Screen Shot 2021-03-08 at 12.16.12.png

Regards
Rob Moore - NEWBY!!
Michal17
Shopify Partner
835 73 175

Okay, Can I know the name of the store theme used to build it.

RobMoore007
Shopify Partner
194 1 20

OUT OF THE SANBOX : FLEX

Regards
Rob Moore - NEWBY!!
KetanKumar
Shopify Partner
36839 3635 11972

@RobMoore007 

Yes i know but  can't see at home page h1 give particlur section screenshot so i will guide you?

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
RobMoore007
Shopify Partner
194 1 20

Hi, here are two screen shots with my comments.. Hope this helps

Regards
Rob Moore - NEWBY!!
RobMoore007
Shopify Partner
194 1 20

~And now with screen shots 🙂Screen Shot 2021-03-08 at 14.09.38.pngScreen Shot 2021-03-08 at 14.07.40.png

Regards
Rob Moore - NEWBY!!
RobMoore007
Shopify Partner
194 1 20

Is not fixed..I had hoped to get some expert help in here ?

Regards
Rob Moore - NEWBY!!
RobMoore007
Shopify Partner
194 1 20

im happy to take your guidance but not open up my code sorry.. Customer wont allow it

Regards
Rob Moore - NEWBY!!
KetanKumar
Shopify Partner
36839 3635 11972

@RobMoore007 

i know but o can't see h1 at banner and at home page how can i guide if possible give further issue screenshot?

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
RobMoore007
Shopify Partner
194 1 20

Hi there, Ive used this piece of code to hid the banner in mobile device. 

However, I have the banner title hidden for desktop but I want to show JUST the banner title (not the banner) in mobile. Can you kindly help please ?

 

Thanks

Rob

Regards
Rob Moore - NEWBY!!
KetanKumar
Shopify Partner
36839 3635 11972

@RobMoore007 

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
RobMoore007
Shopify Partner
194 1 20

https://auchterlonies-com.myshopify.com/

Regards
Rob Moore - NEWBY!!
KetanKumar
Shopify Partner
36839 3635 11972

@RobMoore007 

thanks your store is password protect 

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
RobMoore007
Shopify Partner
194 1 20

awskob

Regards
Rob Moore - NEWBY!!
prispuddings
Excursionist
30 0 9

Hi Ketan,

Thank you for all your help above.

Our text on our banner looks great on desktop, but it shows a big gap under the banner on mobile (where the text needs to lie) and doesn't look neat.

How can I hide the banner from the mobile view only, and then show an image instead for the mobile view only, and keep the banner for the desktop view?

https://pris-puddings.myshopify.com/?_ab=0&_fd=0&_sc=1&key=f4279ebadfd34df00f43de11cb833a0b2448b9015...

Thanks,

Pri

 

RobMoore007
Shopify Partner
194 1 20

My password : awskob

Regards
Rob Moore - NEWBY!!
KetanKumar
Shopify Partner
36839 3635 11972

@RobMoore007 

it's full banner i can't see any text banner 

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
RobMoore007
Shopify Partner
194 1 20

Hi, Yes it is full banner.. the text title is hidden using custom css

 

I wish to show only the text title in mobile device?

Regards
Rob Moore - NEWBY!!
OceanicGoods
Visitor
1 0 1

@KetanKumar I'm just wondering If you'd be able to provide the same solution for me I have a third party banner on my about us section and It does fir properly for mobile. So I would like the banner to show up only on the desktop version of the website. the url is https://www.oceanicgoods.com/pages/about-us

OceanicGoods_0-1685038769158.pngOceanicGoods_1-1685038784886.png

 

KetanKumar
Shopify Partner
36839 3635 11972

@OceanicGoods 

oh sorry for that issue can you please try this code

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

@media (max-width: 749px) {
section#shopify-section-template--18983721566525__e7ac5c53-ef4f-42cb-8d91-db91e8428763 {
    display: none;
        }
    }

 

 

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