Displaying landscape oriented slides on mobiles held portrait

robinwyatt · February 2017

Hi,

I am migrating the Photographer Portfolio Section of my old site to my new WordPress site, which has BeTheme. I am using Slider Revolution to make a template, which I'm modelling on this slider from my old site. Once it's done, I plan to clone the slider multiple times and swap out the text and images for all our other photographers. I'm mostly done with the work (you can see the new slider here), I just have a few tweaks to do. The most important one is about displaying the images nicely on mobiles and tablets when the devices are held in portrait orientation. Please see this image that explains what I'm trying to do. Please could you tell me what I need to do to accomplish this?

Many thanks in advance!

Albert · February 2017

Hi,

Revolution Slider scale to proper sizes for mobile only if you have Auto Responsive option set. Otherwise, it won't be possible.

robinwyatt · February 2017

Hi,

Do you mean Slider Settings > 4. Slide Layout > Auto? I switched this to auto, but nothing changed.

robinwyatt · February 2017

Hi again,

I discovered that I could add this CSS:

.tp-bgimg {
-webkit-background-size: contain !important;
background-size: contain !important;
}

However, as you can see if you look at it on a mobile in portrait orientation (see here), this loads the full landscape image at a huge size for a fraction of a second before displaying the image at its proper width. I would like to prevent this from happening; could you guide me on tweaking the CSS?

Albert · February 2017

Yes, this is the option we are talking about (but make sure, images are set as backgrounds). However, if you would like to sort it out with custom css, instead of contain, you should use cover background size.

robinwyatt · February 2017

Ah, that explains it! Great, many thanks.

Is it possible to stop the site's regular footer from showing on the page on which I deploy the slider?

Albert · February 2017

Yes, it would be possible. Are we talking about home page?

robinwyatt · February 2017

Many thanks. No, we'd be talking about other pages. Each photographer will have a portfolio page featuring a slider. These will work like what you see here (my old pre-WordPress site). As you can see, the footer there is different to the main site.

Albert · February 2017

So in such case, you need to use below css:

.page-id-xxx #Footer { display: none !important; }

where xxx is page ID.

robinwyatt · February 2017

Perfect, thank you!!

Albert · February 2017

You are welcome!

Displaying landscape oriented slides on mobiles held portrait

Comments