responsive image hight

  • Resolved meggsico

    (@meggsico)


    5 months, 3 weeks ago

    Hi Support
    i would like to adjust the height of the image depending on the responsive mode. The following css code does not work. Could you please help me with this?

    
/* Standard Slider H?he */
.sp-image {
    height: 1000px !important;
}

/* Tablet Ansicht */
@media (max-width: 768px) {
    .sp-image {
        height: 500px !important;
    }


/* Mobile Ansicht */
@media (max-width: 480px) {
    .sp-image {
        height: 500px !important;
    }

    Thank you very much
    Meggs

    • This topic was modified 5 months, 3 weeks ago by meggsico.
Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author bqworks

    (@bqworks)

    Hi, Meggs. I would recommend using the Breakpoints feature instead of custom CSS. It would allow you to change several of the slider’s settings based on screen size.

    Best,
    David

    Thread Starter meggsico

    (@meggsico)

    Hi David

    Perhaps I have not expressed myself clearly enough. I would like the slider to have a size of 500px when the website is viewed on a mobile phone, a height of 500px when viewed on a tablet and a height of 1000px when the website is viewed on a PC.

    Can I realize this with the Breakpoints feature?

    Thanks for your message

    Greetings, Meggs

    Thread Starter meggsico

    (@meggsico)

    Hi David

    It works :-). Thank you very much.

    Thread Starter meggsico

    (@meggsico)

    Hi David

    I found out a small problem. When i refresh the page i see the layers of the following images.

    Have a look at my video.

    Greetings, Meggs

    Plugin Author bqworks

    (@bqworks)

    Hi Meggs,

    Please try this custom CSS to hide the layers until the slider is ready:

    .sp-layer:not([style]) {
	opacity: 0
}

    Best,
    David

    Thread Starter meggsico

    (@meggsico)

    Hi David

    Great Job. It works. ??

    Thx a lot

    Greetings, Meggs

    Plugin Author bqworks

    (@bqworks)

    You’re welcome, Meggs! ??

Viewing 7 replies - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.