Hey, there-
So close to putting a bow on this one! Just a few pesky mobile responsiveness details…
1) The page title is WAY too big. I know it’s also very long; client insists.
UPDATE: fixed it with
.title_container .main-title {
margin: 0;
font-size: 13px;
position: relative;
z-index: 2;
min-height: 36px;
line-height: 1.3em;
padding-top: 10px;
padding-bottom: 5px;
letter-spacing: .04em;
font-weight: 200;
}
2) The slider is smooshed. On iPhone6 viewport, the buttons on the slideshow are cut off by the section below (and are too large). I would like to leave the slider in, but this section needs to have a height which accommodates the title, caption, and buttons. Alternatively, I would be happy to have the buttons removed for mobile viewing. What media query Quick CSS could make this a reality?
3) The color section underneath the slider should be customized for this size (padding, heading font-size).
THANKS
Hey A!
Thank you for using Enfold.
1.) Glad you figured this out.
2.) Add this css code to hide the buttons on mobile view:
@media only screen and (max-width: 767px) {
#top .avia-slideshow-button {
display: none;
}
.responsive #top .slideshow_caption h2 {
font-size: 11px !important;
}
}
3.) I’m not sure what you meant by this though. Could you please elaborate? A screenshot will help.
Regards,
Ismael