SKT Corp Pro Theme – Transparent Darker Box Behind Slider Title and Description

Home Forums SKT Full Width Forum SKT Corp Pro Theme – Transparent Darker Box Behind Slider Title and Description

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #149898
    bigcountrykevin
    Participant
    • Topics: 3
    • Replies: 15
    • Total: 18
    Member since: March 1, 2019

    The title and description on my slider image blend in with some of the colors in my slider image making it difficult to read. Is there a way to make a transparent darker box behind my slider title and description?

    #149911
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 24760
    • Total: 24760
    Member since: August 16, 2013

    Hi,

    Kindly show us your website URL please?

    Regards,
    Dave

    #149934
    bigcountrykevin
    Participant
    • Topics: 3
    • Replies: 15
    • Total: 18
    Member since: March 1, 2019

    Sorry about not including that.
    https://www.uniteddisinfectant.com/

    #149963
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 24760
    • Total: 24760
    Member since: August 16, 2013

    Hi,

    Kindly go to Appearance >> Theme Options >> Basic Settings >> Custom CSS Box:

    Add this code there:

    .layout_wide .nivo-caption {
        background-color: rgba(0,0,0,0.5);
        padding: 20px;
    }

    Regards,
    Dave

    #149999
    bigcountrykevin
    Participant
    • Topics: 3
    • Replies: 15
    • Total: 18
    Member since: March 1, 2019

    That’s perfect.. couple other issues.
    When on mobile, the slider photos are not as tall leaving the title missing half of the letters.
    Also, you will see the green bars Ive added with the call to actions, they wrap instead of condense. How do I fix those issues?

    #150017
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 24760
    • Total: 24760
    Member since: August 16, 2013

    Hi,

    Kindly go to Appearance >> Theme Options >> Basic Settings >> Custom CSS Box:

    Add this code there:

    @media screen and (max-width:479px) {
    .nivoSlider img { max-width:140% !important; width:140% !important; margin-left:-40%;}
    .buy_theme h2 a { padding: 10px; font-size: 15px;}
    }

    Regards,
    Dave

    #150029
    bigcountrykevin
    Participant
    • Topics: 3
    • Replies: 15
    • Total: 18
    Member since: March 1, 2019

    The code that you provided fixed the issue I had for “the green bars Ive added with the call to actions, they wrap instead of condense.” – Thank you!

    It did not fix the issue with the slider.
    I will rephrase the problem. When on mobile only, the top of the slider image and the title for the slider are cut off.

    Maybe reducing the size of the title font while on mobile will help? Just thinking out loud, you’re the pro!

    #150035
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 24760
    • Total: 24760
    Member since: August 16, 2013

    Hi,

    Remove CSS

    @media screen and (max-width:479px) {
    .nivoSlider img { max-width:140% !important; width:140% !important; margin-left:-40%;}
    .buy_theme h2 a { padding: 10px; font-size: 15px;}
    }

    Add this new CSS there

    @media screen and (max-width:479px) {
    .nivo-caption { height:auto !important;}
    .nivoSlider img { max-width:140% !important; width:140% !important; margin-left:-40%;}
    .buy_theme h2 a { padding: 10px; font-size: 15px;}
    }

    Regards,
    Dave

    #150039
    bigcountrykevin
    Participant
    • Topics: 3
    • Replies: 15
    • Total: 18
    Member since: March 1, 2019

    Thank you for your time!

    #150061
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 24760
    • Total: 24760
    Member since: August 16, 2013

    Hi,

    If you found our service good kindly review us here: https://www.sktthemes.org/forums/topic/reviews-and-testimonials/page/25/

    Regards,
    Dave

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