Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • March 17, 2016 at 5:11 am #599420
    pantoni

    Hi guys

    I’m using EasySlider at the top of most of my pages and all working OK.

    However, when slowly reducing the browser width from around 862px – 750px, the Caption Title and Caption Text gradually slide down off the bottom of the slide (so cut off).

    I think as the image scales down in size the Captions don’t.

    You can view the front end as per below..

    Thanks

    March 17, 2016 at 6:52 pm #599893
    Yigit

    Hi pantoni!

    Please add following code to Quick CSS in Enfold theme options under General Styling tab

    @media only screen and (max-width: 768px) {
h2.avia-caption-title {
    font-size: 26px!important;
}}

    Best regards,
    Yigit

    March 18, 2016 at 7:05 am #600111
    pantoni

    Hi Yigit

    I’ve added that to my child theme but no luck?

    Cheers

    March 21, 2016 at 7:20 am #601068
    Ismael

    Hi!

    Please adjust the css media query:

    @media only screen and (max-width: 1024px) {
h2.avia-caption-title {
    font-size: 26px!important;
}
}

    Regards,
    Ismael

    March 21, 2016 at 8:28 am #601105
    pantoni

    Thanks Ismael

    That worked. What code should I add to control the font sizes for 760px and less?

    cheers

    March 21, 2016 at 5:20 pm #601375
    Yigit

    Hey!

    Please add following code to Quick CSS 

    @media only screen and (max-width: 760px) {
h2.avia-caption-title {
    font-size: 18px !important;
}
}

    Regards,
    Yigit

    March 22, 2016 at 12:37 am #601618
    pantoni

    Hi Yigit
    I’ve tried that but no change? As a test I made font size 50 but still the same.

    March 22, 2016 at 10:06 am #601778
    Ismael

    Hi!

    Please place the code below the previous code.

    @media only screen and (max-width: 1024px) {
h2.avia-caption-title {
    font-size: 26px!important;
}
}

@media only screen and (max-width: 768px) {
h2.avia-caption-title {
    font-size: 18px !important;
}
}

    Remove browser cache then reload the page.

    Cheers!
    Ismael

    March 23, 2016 at 6:52 am #602340
    pantoni

    Hi

    I’ve got a Slider on the top of every page now. To simplify everything I’ve stripped out all CSS for the h2.avia-caption-title, except for this:

    ————————-
    @media only screen and (max-width: 1024px) {
    h2.avia-caption-title {
    font-size: 40px!important;
    }}
    ————————-

    When reducing the browser width down from full screen, the Slider Caption scales fine at the first breakpoint (approx: 1000px), but on the second breakpoint (approx: 758px), the font size reduces too much.

    This is where I need to add additional code to control this width and smaller to mobile.

    Thanks

    March 26, 2016 at 6:04 am #603771
    Ismael

    Hey!

    You will need this to reduce the font size on screen width 768px below:

    @media only screen and (max-width: 768px) {
h2.avia-caption-title {
    font-size: 18px !important;
}
}

    Best regards,
    Ismael

    March 29, 2016 at 12:44 am #604186
    pantoni

    hi that doesn’t seem to be working. I’m actually wanting to increase the font size for 768 and below. Adjusting the font size with the code above doesn’t seem to work.

    March 29, 2016 at 1:05 am #604192
    pantoni

    Hi – I’ve actually solved the problem with help from #post-603773

    Cheers

    March 29, 2016 at 1:10 pm #604486
    Andy

    Hey!

    glad you could solve it. Let us know in a new ticket if you have some more questions related to the theme. We are happy to assist you.

    Regards,
    Andy

  • Author
    Posts
Viewing 13 posts - 1 through 13 (of 13 total)
  • The topic ‘Enfold Easy Slider Caption Title getting cut off’ is closed to new replies.