Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • August 20, 2018 at 5:12 pm #999503
    Levante Golf

    Hi,

    I´m using the following css to re-posiiton the avia caption title (without frame) on the majority of the site for mobile portrait mode:

    @media only screen and (max-width: 479px) {
    .avia-caption-title {
    position: relative;
    top: -60px;
    left: -50px;
    width: 350px}
    }

    However there are a few caption titles (with frame) that I don´t want this code applied to. I have therefore added a custom class “advproslider” and the following code:

    @media only screen and (max-width: 767px) {
    .advproslider .avia-caption-title {
    position: relative;
    top: 0px;
    left: -10px;}
    }

    which has worked a treat apart from the fact that the frame is now 350px wide on these caption boxes which I don´t want. What can I add to the above code so that the frame is responsive to the word length as normally happens with the theme? I need a way of preventing the “width: 350px” from being applied to this code.

    Many thanks for your help!

    August 21, 2018 at 7:40 pm #999971
    Victoria

    Hey ProTravelGolf,

    Try the code like this:

    
@media only screen and (min-width: 480px) and (max-width: 767px) {
.advproslider .avia-caption-title {
    position: relative;
    top: 0px;
    left: -10px;
    width: auto;
}
}

    Best regards,
    Victoria

    August 22, 2018 at 4:31 pm #1000421
    Levante Golf

    Victoria,

    Awesome worked a treat. Thanks so much!!

    August 22, 2018 at 7:30 pm #1000486
    Vinay

    Hi,

    Glad we could help!

    Please take a moment to review our theme and show your support https://themeforest.net/downloads
    Don’t forget to bookmark Enfold Documentation for future reference.

    Thank you for using Enfold :)

    Best regards,
    Vinay

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Avia Caption Title Background width css over-ride’ is closed to new replies.