Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • March 21, 2017 at 11:59 pm #764442
    timahe

    Hi,

    I am using the enfold integrated slide show below the header and menu of a customers site. On desktop everything looks fine, but on mobile it resizes the header and the fully image (especially the text) is scaled on mobile devices. I am using this layout:

    View post on imgur.com

    and this settings

    View post on imgur.com


    Would be great if you could help me with this soon.

    • This topic was modified 7 years, 8 months ago by timahe.
    March 22, 2017 at 7:26 am #764617
    Jordan Shannon

    Hey Tima,

    Try adding this to quick css

    @media only screen and (max-width: 768px) and (min-width: 483px) {
.caption_right .slideshow_caption{
width:600px!important;
}
}

@media only screen and (max-width: 414px) and (min-width: 320px)  {

.responsive #top .slideshow_caption h2 {
    font-size: 80% !important;
}


.avia-caption-content p{
   font-size: 60% !important;
}

}

@media only screen and (max-width: 320px)  {

.avia-caption-content p{
   font-size: 50% !important;
}

}

    Let me know if this works for you.

    Best regards,
    Jordan Shannon

    March 22, 2017 at 12:00 pm #764724
    timahe

    Hi Jordan,

    now everything gets shown and its better than before of course. But if you have a look at the site with your mobile device again you may see it does not really look ‘nice’. Is there a way to display more from the image so it could look better (like on desktop versions)?

    Regards,
    tima

    March 22, 2017 at 5:38 pm #764915
    Jordan Shannon

    Hi,

    Would you be able to provide admin information so I can adjust this further and see my changes realtime?

    Best regards,
    Jordan Shannon

    March 22, 2017 at 11:07 pm #765097
    timahe

    of course :)

    March 23, 2017 at 5:27 am #765142
    Jordan Shannon

    Hi,

    Please test again and let me know if its better.

    Best regards,
    Jordan Shannon

    April 5, 2017 at 9:17 pm #772843
    timahe

    Hi, sorry for late response. If you check with a resolution like its on normal iPhone 6/7 etc. the house now looks really stretched… Isnt there another way to display this? :(

    April 6, 2017 at 6:48 pm #773391
    Jordan Shannon

    Hi,

    Try updating with the following:

    @media only screen and (max-width: 667px){
#full_slider_1 .avia-slideshow-inner, #full_slider_1 img {
    height: 200px !important;
}
}

    Best regards,
    Jordan Shannon

    April 6, 2017 at 11:51 pm #773598
    timahe

    Hi,
    this looks much better now. I am just experiencing a problem with the text: It becomes some kind of blurred. Is there a way to ‘highlight’ the text?

    April 7, 2017 at 4:01 pm #774051
    Jordan Shannon

    Hi,

    You would just have to use the slider editor to adjust the color and or background of the text to something that is satisfactory and won’t clash with the house background.

    Best regards,
    Jordan Shannon

    April 14, 2017 at 8:50 pm #778062
    timahe

    Ok is it possible to just show a background on mobile devices using CSS? E.g. I would use a light gray background for mobile, on desktop devices no background

    April 14, 2017 at 9:17 pm #778068
    Jordan Shannon

    Hi,

    So you want to remove the house background completely on mobile?

    Best regards,
    Jordan Shannon

    April 15, 2017 at 12:59 am #778115
    timahe

    Hi jordan,

    no my plan was to display slideshow to everyone but the text of the slideshow should have a light gray background. Of course I know how I would do this normally but I just want to have this ‘text-background’ on mobile devices.

    April 15, 2017 at 7:02 am #778131
    John Torvik

    Hi,

    I`ll provide a custom CSS code and let me know if it is good for you.

    @media screen and (max-width: 480px) {
    . av-slideshow-caption {
     background-color: #f1f1f1;
     opacity: 0.8;
   }
}

    Best regards,
    John Torvik

    April 15, 2017 at 8:24 pm #778280
    timahe

    Hi,
    I think this should be exactly what I searched for but it seems like it does not work – noch changes happened on my mobile device (iPhone 7).. You may check yourself using link given in the first post

    April 17, 2017 at 3:05 pm #778726
    Jordan Shannon

    Hi,

    Johns code worked, there was just a space that needed to be fixed on the class. Please test the site again.

    Best regards,
    Jordan Shannon

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