Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • April 9, 2018 at 11:14 am #939066
    Johan Lindvall

    Hi!

    I´m having an issue with buttons when viewing on mobiles.
    There buttons being minified, not centered (responsive issue?) and being pulled in under other text.
    Please check to images provided.
    I can´t find any button-code in the style.css, so I don´t quite understand why it behaves like this. No problem on desktop or tablet views.

    And in addition, you can see on image 1675 and 1674 that the breaking of the elements doesn´t work, even though it has been set in the colorsection-toggle. Any ideas? =)

    Regards Johan

    April 10, 2018 at 7:38 am #939645
    Ismael

    Hey Johan,

    Thank you for using Enfold.

    The style is different because of the following css modifications.

    @media only screen and (min-width: 767px) {
body div .avia-button {
    border-radius: 3px;
    padding: 10px;
    font-size: 12px;
    text-decoration: none;
    display: inline-block;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    margin: 3px 0;
    line-height: 1.2em;
    position: relative;
    font-weight: normal;
    text-align: center;
    max-width: 100%;
}
}

    The button is being applied only when the screen width is wider than 767px.

    Best regards,
    Ismael

    April 10, 2018 at 8:10 am #939686
    Johan Lindvall

    Thanks!

    But where did you find that code?
    I can´t seem to find it. =)

    Regards Johan

    April 11, 2018 at 12:12 am #940088
    Basilis

    Hi,

    an you please check your Custom CSS section, at the Theme Options please?

    Best regards,
    Basilis

    April 11, 2018 at 7:13 am #940229
    Johan Lindvall

    I´ve already checked the quick css and the style.css in my child theme. Nothing there.
    Unless there is another css section you refer to?

    Regards Johan

    April 12, 2018 at 5:51 am #940787
    Ismael

    Hi,

    Thank you for the update. Try to use it in the Quick CSS field to override the previous modification.

    @media only screen and (max-width: 1920px) {
body div .avia-button {
    border-radius: 3px;
    padding: 10px;
    font-size: 12px;
    text-decoration: none;
    display: inline-block;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    margin: 3px 0;
    line-height: 1.2em;
    position: relative;
    font-weight: normal;
    text-align: center;
    max-width: 100%;
}
}

    Best regards,
    Ismael

    April 12, 2018 at 8:32 am #940807
    Johan Lindvall

    Worked perfectly!
    Thank you very much!

    Still curious though; where did you find that other code? Is there some secret place I don´t know of? =D

    Regards Johan

    April 13, 2018 at 12:45 pm #941460
    Ismael

    Hi,

    It’s in the merged stylesheets so I don’t know specifically where it came from. The code above should override it. :)

    Best regards,
    Ismael

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