Home › Forums › Massage Center (Spa) Forum › CSS needed to correct responsive formatting
- This topic has 3 replies, 2 voices, and was last updated 3 years, 4 months ago by
Forum Moderator.
-
AuthorPosts
-
May 6, 2020 at 3:08 pm #151211
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!
May 7, 2020 at 6:32 am #151241Hi,
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,
DaveMay 7, 2020 at 12:34 pm #151271This 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?
May 8, 2020 at 8:40 am #151349Hi,
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 -
AuthorPosts
- You must be logged in to reply to this topic.