Separate Slideshow for Mobile

CHRISRIEFENBERG

Hey everyone,

I have two things I want to fix for my mobile website:

1. I have a slideshow set for my homepage. Some of the images dont really work for a mobile view tho. This is why I want to create a separate slideshow which will be shown only for mobile devices. I probably have to do it via CSS but I couldnt find a solution so far and i m not familiar with CSS. Does someone here know the CSS command to do so?

2. Is it possible to change the font color for mobile only? Reason I want to do this is that once I open my hamburger menu the font is white as it is on my website, but hard to read on most of my winter images. I ve been able to change the color of the hamburger menu to black but not for the font color.

Big thanks in advance

Chris

jerryr

hi - for #1

As a suggestion :

• Create two slideshows on your home page - one for mobile and one for non-mobile.

• Look at the CSS on the page - perhaps using FireFox Web Developer - and obtain the widget id for each of the slideshows.
  Example : .sm-page-widget-12345678
  example large slideshow : .sm-page-widget-12345678
  example mobile slideshow : .sm-page-widget-90123456

• Add a block of CSS to the home page with the following

.sm-page-widget-12345678 {display: none;}

@media only screen and (min-width : 768px) {
.sm-page-widget-12345678 {display: block;}
.sm-page-widget-90123456 {display: none;}
}

That should do the trick - jerryr

CHRISRIEFENBERG

Hey @jerryr

that sounds reasonable thanks a lot. I m facing some problems as i am not really familiar with all the css and codes.

how can i grab/ find the css widget for the slideshow? When i open the css with firefox web developer there are hundreds of lines etc. and I have no idea where it could be :/.

Also I have the slideshow set as a background slideshow and not a gallery which is set to a slideshow format. Do you think that makes a difference? Coz I cant have to background slideshows on one page right?

Thats my website by the way: www.chrisriefenberg.com

Thanks a lot for your help

Chris

Allen

Using Firefox and right clicking on page element/object and selecting "Inspect Element" from drop menu. The html for that spot you clicked on will be highlighted in the Inspector box. The actual widget number will be up the html tree maybe 5-10 lines. example: .sm-page-widget-12345678

A couple things makes it difficult picking/finding the place in the html, RightClickPrortection is on and slideshows cause a problem. I usually find a place to click on the same level as the element off to the side.

CHRISRIEFENBERG

Thanks @Allen

i cant find it. When I search for page-wdiget via the search function I have 29 entries. For the logo, social icons etc. It seems like the gallery itself is not a widget since the gallery is the entire page (background slideshow).

I added a new page now where I added a mobile slideshow as a widget and I found the number. But I dont think my homepage (the slideshow people see when they enter my website) is a widget. It is the background slideshow you see when you enter: www.chrisriefenberg.com

So maybe its better to start fresh. How can I avoid that this slideshow will be displayed on a phone? After I could disable this with a css content block i should be able to show my slideshow for mobile.

I hope this wont be to confusing to understand:)

Thanks in advance.

Chris