Pista dry Fruit benefits.REGISTER NOW GET FREE 888 PESOS REWARDS!

Resolved happyday25
(@happyday25)

4 years, 8 months ago

Hello,

I am using Smart Slider 3 to load three versions of a slider in my website header. Each version is shown/hidden at specific screen widths via css media queries. The media queries work as far as hiding and showing the sliders at the appropriate sizes, but adding multiple versions creates large blank spaces where the hidden sliders are located. Is there a way to get rid of these spaces? My WordPress site uses the Avada theme.

Thank you!

Viewing 3 replies - 1 through 3 (of 3 total)

Ramona
(@nextend_ramona)

4 years, 8 months ago
Hi @happyday25

Which selector are you using to hide the slider? Probably the best would be publishing like this:
```
<div id="slider-desktop">[smartslider3 id=1]</div>
<div id="slider-tablet">[smartslider3 id=2]</div>
<div id="slider-mobile">[smartslider3 id=3]</div>
```
and hide these #slider-[device] selectors.

If you’re already using this method, can you share your site URL? If you don’t want to display the URL in a public forum, you can send it at: https://smartslider3.com/contact-us/support/?ref=https://www.ads-software.com/support/topic/smart-slider-blank-space-when-using-media-queries/
Thread Starter happyday25
(@happyday25)

4 years, 8 months ago

Hi @nextend_ramona,

This fixed the spacing problem, thank you!

Another problem I’m finding now is that the media queries still load all three sliders even though only one is visible at a time. It looks ok visually, but is killing my google page speed store since all of the images are still loading on the backend. I am using the CSS property “display: none;”. Is there a way to change this so that only one slider loads depending on the screen size?
Plugin Support Laszlo
(@laszloszalvak)

4 years, 8 months ago
Hi @happyday25

Hiding media with display:none; will still be loaded by the browser.
For example if you put this tag to one of your test page:
<img src="https://www.w3schools.com/html/pic_trulli.jpg" style="display:none;">
and then inspect the resources in your browsers Network tab: https://developers.google.com/web/tools/chrome-devtools/network
you will notice that the image is still loaded, but as you can see it is not displayed either.

It is important to mention that, different browsers may handle certain resources differently, as you see here:
https://web.archive.org/web/20130830082659/https://www.justinmarsan.com/blog/researches/hidden-elements-and-http-requests.html

But in the Pro version we have some options to detect the device from server side and to hide the sliders from devices, so you could make the media in a hidden slider not to be loaded at all. Anyways on this forum we are only allowed to provide support for the Free version. If you would like to know more information about this topic, please rather open a support ticket at:
https://smartslider3.com/contact-us/support/?ref=https://www.ads-software.com/support/topic/smart-slider-blank-space-when-using-media-queries/

Best regards,
Laszlo.
- This reply was modified 4 years, 8 months ago by Laszlo.
- This reply was modified 4 years, 8 months ago by Laszlo.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Smart Slider blank space when using media queries’ is closed to new replies.

Tags