CSS needed to correct responsive formatting

[Lana Good]

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: 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!

[Forum Moderator]

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

[Lana Good]

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?

[Forum Moderator]

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

[Author]

Posts