Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • December 5, 2018 at 1:43 am #1041030
    vbanks7

    Hello,
    Can you tell me how I might justify the text in this orange button so it is aligned? http://bankslawoffice.com/

    December 5, 2018 at 5:07 am #1041067
    Mike

    Hey vbanks7,
    When I take a look at your button the text is centered, with equal padding around it.
    If I understand correctly you would like the text aliened to the left edge of the button?
    Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

    .avia-button-left.avia-builder-el-5 a {
text-align: left !important; 
}
.avia-button-left.avia-builder-el-5 .avia-button.avia-size-large {
    padding: 15px 40px 13px 5px !important; 
}

    Best regards,
    Mike

    December 8, 2018 at 5:16 am #1042318
    vbanks7

    Hi Mike,
    You understand correctly. I just want the text to align left inside the orange button on the home page. I pasted this code in CSS under general styling:
    .avia-button-left.avia-builder-el-5 a {
    text-align: left !important;
    }
    .avia-button-left.avia-builder-el-5 .avia-button.avia-size-large {
    padding: 15px 40px 13px 5px !important;
    }
    Seems like it would work but not getting it. Feel free to log in. Thanks for any additional thoughts

    December 8, 2018 at 5:33 am #1042319
    vbanks7

    It is working now! Not sure if you changed it of if maybe I had to clear cache but yay! Thanks

    December 8, 2018 at 5:34 am #1042321
    Mike

    Hi,
    Thanks for the login, I took a look at your page again and I see that the elements have changed a little so my css from before would not work. So I added a custom class to the button “left_align” to replace the auto generated class “avia-builder-el-5”
    so the css I added to your Quick CSS is this:

    .avia-button-left.left_align a {
text-align: left !important; 
}
.avia-button-left.left_align .avia-button.avia-size-large {
    padding: 15px 40px 13px 5px !important; 
}

    It now seems to work correctly, Please clear your browser cache and check.

    Best regards,
    Mike

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