Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • February 17, 2020 at 11:57 pm #1185467
    haines1

    Hello,

    Would you know the quick css code to enable my home page fullwidth easy slider captions and sub-captions for the mobile version with fonts that fit on the image dynamically when it switches from portrait to landscape on the phone and tablet.

    Thank you kindly,

    February 18, 2020 at 12:05 pm #1185612
    Rikard

    Hey haines1,

    Please try the following in Quick CSS under Enfold->General Styling:

    Landscape:

    @media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { 
  .slideshow_align_caption h2 {
    font-size: 24px;
  }
  .avia-caption-content p {
    font-size: 18px;
  }
}

    Portrait:

    @media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { 
  .slideshow_align_caption h2 {
    font-size: 20px;
  }
  .avia-caption-content p {
    font-size: 14px;
  }
}

    Best regards,
    Rikard

    February 19, 2020 at 3:14 am #1185894
    haines1
    This reply has been marked as private.
    February 19, 2020 at 7:15 am #1185918
    Jordan Shannon

    Hi,

    Did you add the code to the very top of quick css so it so it runs first? Also, be sure to clear the cache a few times over.

    Best regards,
    Jordan Shannon

    February 19, 2020 at 8:31 am #1185934
    haines1
    This reply has been marked as private.
    February 20, 2020 at 5:58 am #1186222
    Rikard

    Hi,

    Thanks for the update, are you checking on a mobile phone? The CSS I sent will only apply to tablet screen sizes. Could you check that resolution first please?

    Best regards,
    Rikard

    February 20, 2020 at 7:09 am #1186236
    haines1
    This reply has been marked as private.
    February 20, 2020 at 7:09 am #1186237
    haines1

    Hi Rikard,

    I do not have a tablet at this time. Can we optimize for PC and Smartphone for now?

    Thank you.

    February 21, 2020 at 10:18 am #1186643
    Rikard

    Hi,

    Yes, you can simply change the pixel values in the media queries:

    @media only screen  
and (max-device-width : 767px) 
and (orientation : landscape) { 
  .slideshow_align_caption h2 {
    font-size: 24px;
  }
  .avia-caption-content p {
    font-size: 18px;
  }
}

@media only screen 
and (max-device-width : 767px) 
and (orientation : portrait) { 
  .slideshow_align_caption h2 {
    font-size: 20px;
  }
  .avia-caption-content p {
    font-size: 14px;
  }
}

    Best regards,
    Rikard

    February 27, 2020 at 7:17 pm #1188573
    haines1
    This reply has been marked as private.
    February 28, 2020 at 10:12 pm #1188926
    Victoria

    Hi haines1,

    Please try the code like this:

    

@media only screen  
and (max-device-width : 767px) 
and (max-width: 767px)
and (orientation : landscape) { 
  .slideshow_align_caption h2 {
    font-size: 24px !important;
  }
  .avia-caption-content p {
    font-size: 18px !important;;
  }
}

@media only screen 
and (max-device-width : 767px) 
and (max-width: 767px)
and (orientation : portrait) { 
  .slideshow_align_caption h2 {
    font-size: 20px !important;
  }
  .avia-caption-content p {
    font-size: 14px !important;
  }
}

    If you need further assistance please let us know.
    Best regards,
    Victoria

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