1. I need to move the Captions and button Up a bit on mobile view. Can you get me some CSS for this please?
2. The Text also runs off the page instead of resizing to fit.
3. The image stretches when I increase this code below. Is there a way to just increase the height without distorting the image? Like maybe it just increases the magnify and zooms in on an area?
@media only screen and (max-width: 768px) {
.responsive #top .avia-slideshow-inner, .responsive #top .avia-slideshow-inner img {
height: 550px !important;
}
}
Thanks!!
Let me know on this when you get a chance. thanks again
Hi,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:
@media only screen and (max-width: 425px) {
.html_header_transparency #top .avia-builder-el-0 .slideshow_caption {
padding-top: 0;
}
#top #wrap_all #main .avia-slideshow .avia-caption-title {
font-size: 40px;
}
}
After applying the css, please clear your browser cache and check.
Best regards,
Mike
I didn’t move. How do I move the all the text and button, up higher?
Hi,
This was for mobile, right?
It looks moved for me, see below
try to clear your cache.
Best regards,
Mike
I still doesn’t. I saw it start high and go back to original low spot. I even cleared cache.
Hi,
The css I posted above is for max-width: 425px, since it is for mobile only, what screen resolution is your screenshot from?
try changing the max-width to suit your device.
Best regards,
Mike
Thanks! And is there simple CSS to make the mobile logo larger?
Hi,
This css doubles it, try adjusting to suit:
.av-hamburger-box {
width: 70px;
height: 16px;
}
Best regards,
Mike
That made the hamburger icon wider, not the logo. How do I do logo larger?
Hi,
Sorry try this:
@media only screen and (max-width: 990px) {
.logo.avia-standard-logo img {
max-height: 180px;
}
}
Best regards,
Mike
thanks!