Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #259586

    Hello,

    When you use the div.slideshow_inner_caption at/below the breakpoint of max-width 767, the overlay obliterates the entire containing div.

    How does one fix it so that the background: rgba(0, 0, 0, .5) can become background: rgba(0, 0, 0, 0) at/below the breakpoint of max-width 767?

    Thank you!
    Doug

    #259587

    Hey Doug!

    Try:

    @media only screen and (max-width: 767px) {
    div.slideshow_inner_caption{
    background: rgba(0, 0, 0, 0);
    }
    }
    

    Cheers!
    Josue

    #259681

    Hi, Josue

    That doesn’t seem to work either; please advise.

    There are other problems as well when the slideshow is viewed on mobile devices.

    http://www.midlandsupply.com/wpnew/

    Thank you,
    Doug

    #259692

    Hi!

    Please add following code to Quick CSS instead

    @media only screen and (max-width: 767px) {
    #top div .slideshow_caption {
    background: rgba(0, 0, 0, 0)!important;
    }}

    Best regards,
    Yigit

    #259810

    Hi, Yigit

    At max-width: 767px, the slideshow overlay is still overlaying the entire slideshow. I can’t find out in the documentation how to fix that. Please advise and thank you.

    Doug

    #259815

    Hey Doug!

    You have to target both the slideshow and the inner_slideshow:

    @media only screen and (max-width: 767px) {
    #top .slideshow_caption, #top .slideshow_inner_caption{
    background: rgba(0, 0, 0, 0)!important;
    }
    }

    Best regards,
    Josue

    #259830

    Hi, Josue!

    I put this code in: #top .slideshow_caption, #top .slideshow_inner_caption {
    background: rgba(0, 0, 0, 0);
    }

    …saved…cleared the browser cache…and it still shows the overlay at max-width: 767px; am I doing anything wrong?

    I added !important and it works; now, the problem is how to treat the caption…just display: none? Then, everything goes away. What would you do in this case, please? I am open…

    I really appreciate your help, everyone at Kriesi!

    I used Droid Sans for the H1 and positioned it relative to the container; how does it look to you?

    Thank you,
    Doug

    • This reply was modified 4 months ago by  guitahplayah. Reason: I added !important and it works; now, the problem is how to treat the caption...just display: none?
    • This reply was modified 4 months ago by  guitahplayah. Reason: I used Droid Sans for the H1 and positioned it relative to the container; how does it look to you?
    #260625

    Hey!

    It works for me now (tested with Chrome). If it doesn’t work on your end try to clear the browser cache and change the code to:

    
    @media only screen and (max-width: 767px) {
    #top .slideshow_caption, #top .slideshow_inner_caption {
    background: transparent !important;
    }
    }
    

    Regards,
    Peter

    #260915

    Hi, Peter

    Thank you! One last thing: when the slideshow renders, there’s a brief hiccup as it is drawing itself on the screen. Can you see this happening on your end? It’s like something in the css needs to be changed so that there’s a seamless redraw of the slideshow. Vertically, it appears at about the “Variety of Storage Options” in the homepage sidebar.

    Thanks again,
    Doug

    #261122

    Hi Doug!

    If you are referring to that height change that happens when it loads, that’s expected when the slider is taller than the default height.

    Best regards,
    Josue

    #261860

    Oh, ok, Josue.

    Thank you!

    Question: is the default height in a php file that can be edited?

    Peace,
    Doug

    • This reply was modified 3 months, 3 weeks ago by  guitahplayah. Reason: Question: is the default height in a php file that can be edited?
    #261988

    Hi!

    No, css/slideshow.css, line 4:

    .slideshow{
    height:340px;
    }

    Regards,
    Josue

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.