CSS needed to correct responsive formatting

Home Forums Massage Center (Spa) Forum CSS needed to correct responsive formatting

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #151211
    Lana Good
    Participant
    • Topics: 2
    • Replies: 1
    • Total: 3
    Member since: April 30, 2020

    Hello,

    Could I get some help with CSS code to fix the responsive formatting for my site?
    The frontpage slider looks great on a desktop but not on mobile devices.

    The website is: http://www.goodpractice.ca

    Current CSS is:

    span.desc{display: none;}
    @media screen and (max-width:767px) {
    .innerbanner { height:auto !important;}
    }
    #simple-menu { color: #434242; z-index: 99999999;}
    }

    Thannks!

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

    Hi,

    Kindly go to Appearance >> Customize >> Basic >> Scroll down to find Custom CSS and paste there:

    @media screen and (max-width:479px) {
    .nivo-caption .title {
        font-size: 20px !important;
    }
    .nivoSlider img { max-width:130% !important; width:130% !important; margin-left:-30%;}
    }

    Regards,
    Dave

    #151271
    Lana Good
    Participant
    • Topics: 2
    • Replies: 1
    • Total: 3
    Member since: April 30, 2020

    This fixed the issue on iPhones but when I test on iPads, the green title “Welcome to” and words “Good Practice Physiotherapy” are forced to overlay on top of the logo and top menu bar.

    Is there a way to force the slide title and appointment button to show but not overlay on top of the logo and top menu?

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

    Hi,

    Kindly go to Appearance >> Customize >> Basic >> Scroll down to find Custom CSS and paste there:

    @media screen and (min-width:768px) and (max-width:1023px) {
    .nivo-caption { top:60%;}
    .nivo-caption .title {
        font-size: 40px !important;
    }
    .nivoSlider img {
        max-width: 130% !important;
        width: 130% !important;
        margin-left: -30%;
    }
    }
    
    @media screen and (min-width:768px) and (max-width:1023px) {
    .nivo-caption { top:70%;}
    .nivo-caption .title {
        font-size: 42px !important;
    }
    .nivoSlider img {
        max-width: 130% !important;
        width: 130% !important;
        margin-left: -30%;
    }
    }

    Regards,
    Dave

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