Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • January 20, 2015 at 7:50 pm #382610
    knitsfor

    Hi,

    I have an easy slider on my welcome page with a caption title and caption text. This looks great on a laptop but when I check my site on my iPhone the heading is cut off. It is fine on an iPad, just seems to be the small screen of the phone that is the problem.

    Is there a way to make it responsive for a mobile device? Or should I be using something else for the front page.

    Thanks,

    Clare

    January 21, 2015 at 10:20 am #382929
    Ismael

    Hey knitsfor!

    Thank you for using Enfold.

    Try to add this on Quick CSS:

    @media only screen and (max-width: 767px) {
.avia-slideshow .avia-caption .avia-caption-title {
font-size: 14px;
padding: 5px 7px;
}

.avia-caption-content p {
font-size: 12px;
padding: 5px 7px !important;
}
}

    Remove browser cache then reload the page.

    Best regards,
    Ismael

    January 21, 2015 at 3:12 pm #383019
    knitsfor

    Thanks. This seems to have solved part of the problem – the headings are now smaller. I changed the font size to 10 and 8 as it was still too big

    Is there anyway I can move them further down? I am assuming this is the padding option but not sure how much to adjust by?

    Thank you for your help.

    January 21, 2015 at 3:26 pm #383025
    knitsfor

    Hi,

    I used some code I found in another post to remove the titles as it seemed the easiest option.

    @media only screen and (max-width: 767px) {
    .avia-caption { display: none; }}

    Is there a way of making the images fit better on the screen. It looks great on a laptop but because the phone screen is portrait and not landscape it looks odd.

    Thanks for your help. The support here is brilliant, I really appreciate it. Would never have built a website without these forums, really helpful.

    January 22, 2015 at 7:23 am #383536
    Ismael

    Hi!

    You should probably create another slider specifically for mobile devices. Try to add another fullscreen slider. Refer to this link on how to hide or show specific elements on different screen sizes using custom css class and media queries:

    https://kriesi.at/support/topic/is-there-an-option-to-create-a-separate-page-design-specific-to-mobile-devices/

    https://kriesi.at/support/topic/displaying-another-slider-on-mobile-devices/

    https://kriesi.at/support/topic/replace-slider-on-mobile/

    Regards,
    Ismael

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