Tagged: , ,

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • November 25, 2015 at 5:42 pm #542584
    1039 Online

    I have a theme button with an email address as its content. When the screen width is narrow, the email address is too long to fit in the button and so extends outside of the button. On a very narrow screen, that means some of the email address is cut off and doesn’t display. Is there a way to make the button and its text more responsive so the text will stay in the button? Perhaps either the text becomes smaller or wraps?

    November 25, 2015 at 6:12 pm #542617
    Elliott

    Hey 1039 Online!

    Send us a link to the page and we’ll take a look. You can set your reply as private if you wish.

    Cheers!
    Elliott

    November 25, 2015 at 6:48 pm #542637
    1039 Online

    Thanks for taking a look. Link in private content.

    November 25, 2015 at 9:54 pm #542714
    Elliott

    Hey!

    Well, the only thing I can think of is to give it a smaller font size. Add this to a codeblock element in the page.

    <style type = "text/css">
@media screen and (max-width: 1260px) {
.avia_iconbox_title { font-size: 11px !important; }
}
</style>

    Cheers!
    Elliott

    November 25, 2015 at 10:54 pm #542749
    1039 Online

    Elliot,

    That result of that code worked great on my phone. However, on my desktop, the text still extends past the button because it is not centering. If the text would just move over, like it does on the phone, it would work.

    November 25, 2015 at 11:16 pm #542760
    Yigit

    Hi!

    Can you please try adding following code to Quick CSS as well

    .avia_iconbox_title { overflow: visible; }

    Best regards,
    Yigit

    November 25, 2015 at 11:32 pm #542774
    1039 Online

    I want to keep the text within the button rather than having it overflow. The overflow is showing, but there is no need for an overflow if the icon and text will center in the button.

    November 26, 2015 at 10:46 am #542965
    Yigit

    Hi!

    Please add following code to Quick CSS as well

    .avia_iconbox_title {
    font-size: 16px;
}

    do not forget to edit your element and change the font size of your span within iconbox title as well

    Best regards,
    Yigit

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