How do i remove certain images for mobile

[Tousifm1]

Hi,

I have a weird picture resolution that works well when my website is on desktop, but appears extremely weirdly when on mobile. Is there a work around this? Can I make the picture not appear on mobile and just on desktop?

Website: florentinahq.com

I am talking about the "explore our limited time offer" section above the footer.

Many thanks. 

[BSS-TekLabs · Accepted solution]

- Here is the solution for you @Tousifm1 
- Please follow these steps:

- Then find the base.css or theme.css file.
- Then add the following code at the end of the file and press 'Save' to save it.

 

@media only screen and (max-width: 600px) {
.banner--large.banner--mobile-bottom:not(.banner--adapt) .banner__media {
 display: none !important;
}
}

- Here is the result you will achieve:

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

[BSSCommerce-B2B]

HI @Tousifm1 , 

I have reviewed your requirement, you just need to edit css script and the issue will be resolved.  You can follow my instructions! 

Step 1: Go to Admin -> Online store -> Theme > Edit code:

Step 2: Search for the file base.css. And add this code snippet to the end of the file.

@media only screen and (max-width: 768px) {
  .banner__media.media.scroll-trigger.animate--fade-in {
    display: none !important;
  }
}

In this step, you can disable the banner media (certain images) for mobile view as you want

Step 3: Save your code and reload this page.

The result will be: 

'

I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.

Have a nice day sir!