Displaying landscape oriented slides on mobiles held portrait

robinwyatt

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

Hi,

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

robinwyatt

Hi,

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

robinwyatt

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

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.

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

robinwyatt

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

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

robinwyatt

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

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

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

where xxx is page ID.

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

robinwyatt

Perfect, thank you!!

Albert

You are welcome!

Learn more: Video Tutorials | How To | FAQ Vote on what comes next