remove html banner from mobile view

  • 2
  • Question
  • Updated 3 years ago
  • Answered
I have a slider banner on my shop page, How can I make it not show in mobile view, its to big!! and looks messy. Also is there a way to replace with another with correct size?
Photo of Sarah O'Reilly

Sarah O'Reilly

  • 14 Posts
  • 1 Reply Like

Posted 3 years ago

  • 2
Photo of Saskia

Saskia

  • 110 Posts
  • 11 Reply Likes
Hello Sarah,

Thank you for reaching out to us today!

Unfortunately, it is not possible to make separate changes for only tablet or mobile devices. You will therefor not be able to have two versions of your site.

However, we would be happy to assist you with adjusting your site content so it looks good both on your desktop and mobile version. In order to do so, could you please email us at support@yola.com from the email address you use when logging in to your Yola account? This way we will be able to immediately pull up your account and access your site in your Sitebuilder to do some testing and troubleshooting.

We look forward to hearing from you and assisting you further!

Kind Regards,
Saskia

Community Support Specialist
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hello Sarah,

There are a number of strategies to effect this. It is a very common requirement and subsequent process to prevent the display of over-sized elements for mobile and/or tablet views of reactive design websites.

The most straight forward way is to use a mobile view statement  that prevents the display of a specific class on a mobile device. A couple of lines of CSS.

Google is your friend on this solution.
(Edited)
Photo of TobiasMD

TobiasMD

  • 2 Posts
  • 1 Reply Like
"Media queries" is the Keyword, then your CSS should contain sth like this:

@media screen and (max-width: 679px) {header div img{display:none} }

@media screen and (max-width: 414px) {header div img {display:none}}

@media screen and (max-width: 320px) {header div img {display:none}}
(Edited)
Photo of Sarah O'Reilly

Sarah O'Reilly

  • 14 Posts
  • 1 Reply Like
}            #Ic7cb4202e05d4263ca8ec02b5a01ed9c_html{
    display: block;
}

@media (max-width: 580px) 
{
    #Ic7cb4202e05d4263ca8ec02b5a01ed9c_html
    {
        display: none;
    }
}

I used the above, would your option be better? Is there away to reduce size in% using this method, I have a banner on shop page that I think Idlike to size down for device view?Or replace with a static imageonly for devices?Or is this getting abit complicated?!!
Photo of TobiasMD

TobiasMD

  • 2 Posts
  • 1 Reply Like
Your option should be fine, we used the same concept!

Ofcourse you can size it down in % or with a static size. For a static size just change "{display: none;}" into {max-width:40%} . Just try it with different %values ;)

To reduce the size in % you also have to change the attributes of your image/banner.  You achieve this by giving you banner a relative size via your CSS, f.e.

header img {max-width:50%; float:left; margin:3% 0 0 5%; position:relative;}

You can also add different options for the display of your image/banner on different devices / screen sizes

@media screen and (max-width: 679px) ....
@media screen and (max-width: 414px)....
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hello TobiasMD,

The banner used in this specific query is a third party creation brought in as an iframe. The original banner specs aren't able to be manipulated as such. Can an iframe be relatively sized in such situations? If so that would be a great solution.
Photo of Sarah O'Reilly

Sarah O'Reilly

  • 14 Posts
  • 1 Reply Like
apparently not this is what im getting  when I apply the above x
(Edited)
Photo of Sarah O'Reilly

Sarah O'Reilly

  • 14 Posts
  • 1 Reply Like
If its not possible, can you reccomend a slider that is compatable for all screen sizes?
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Wow Slider is one.
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Or comslider.com. These two are the ones we recommend to use for responsive purposes right now.