position of pagination dots under pics

Hi It is the ‘Min Height’ that you have set for your slides that is causing this issue. It is set to ‘644px’.

You could try using a percent for ‘Min Height’ instead.

OR add some responsive CSS:

@media only screen and (max-width:767px) {
	#slider_1111_slide02 { min-height:600px !important; }
}
@media only screen and (max-width:479px) {
	#slider_1111_slide02 { min-height:570px !important; }
}

You’ll have to play around with the values to suit…

Hi
thank you for your quick answer

in the plugin control panel:
(as you suggested)
I tried to put min-height to 144% instead of a fix px value (644px)
it seems to work,
but when I call the page first
the slides are tiny, and top left

they get the proper full size only if I change the browser size on a desktop
or rotate the phone from portrait to landscape and back

like if some kind of refresh was missing
(this does not happen with a fix px min-height value)

you can check at:

https://www.megaherzig.ch/fire-fire-desire/#tab-galerie

thank you

PS:

I found a strange behaviour about this issue of small pics:

when I put a min-height % value in the plugin control panel
and I analyze the code when i call the page (with F12 on the chrome browser)
I see the min-height value appears in px INSTEAD of % and this is the effective size of the “small pics which appear in the beginning

i tried to change the value to test and it is mirroring the value each time

• This reply was modified 6 years, 2 months ago by akewowo. Reason: found a stange behaviour

Try ticking the “DOMContentLoaded event” checkbox, under “Other Settings” in the right-hand sidebar.

When using % for min-height, some JavaScript code is supposed to execute:
1. After the page has loaded, and
2. Whenever the page is resized
This JS code gets the width of your screen/window, divides this by the number of slides being displayed and using the ‘min-height’ pecentage setting calculates your min-height in pixels. This happens dynamically.

So for some reason this JS is only working on your site when you resize and not after page load – so that’s why I created the “DOMContentLoaded Event” option.

If you have no joy, then the Responsive CSS Code option I provided you previously should still work – insert this code in your theme’s ‘style.css’ file.

Hi
thank you for your fast answer

I tried with DOM, no joy…

I put the CSS you provided, seems to work somehow better,
but this code is related to slide02 only, how would look the code to apply it globally to the whole #slider_1111?
i will have dozens of pics,
thank you

PS
but now the picture width is reduced onslide02 on a phone

• This reply was modified 6 years, 1 month ago by akewowo.

Try This:

@media only screen and (max-width:767px) {
	#slider_1111 .owl-item .sa_hover_container { min-height:600px !important; }
}
@media only screen and (max-width:479px) {
	#slider_1111 .owl-item .sa_hover_container { min-height:570px !important; }
}

Hi, it works fine now, also on the phone, portrait or landscape.
I had to adjust the pixel values a bit.

great support thanks a lot
ad best regards from Switzerland