Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • April 29, 2018 at 12:56 am #948486
    goldengate415

    Hi, I added a bunch of buttons to this page:
    http://www.thomashenthorne.com/marin-open-houses/

    Under the headline “Marin County Open Houses by Town” and they are all the button element size small, but they are different sizes (slightly) and look very different / not good on mobile.

    How do I make the buttons all uniform?

    Thanks!
    Rob

    PS A nice break from 4.3 questions, right? :)

    April 29, 2018 at 2:08 pm #948624
    Vinay

    Hey goldengate415,

    Thank you for reaching out to us, I checked the page “Ross Open Houses” is set to large.

    haha, I love questions about button elements :)

    Best regards,
    Vinay

    April 29, 2018 at 5:51 pm #948676
    goldengate415

    Hi Vinay,

    Yes, I set “Ross” to large because before I did that, the Ross button came in smaller because the city name is so short, the button became smaller. If you look on mobile you will see that each button, not just Ross, is responsive so they are all slightly different sizes.

    How do I make them the same size on mobile (and I assume desktop will follow).

    Mobile first design! :)

    Thanks
    Rob

    April 29, 2018 at 9:49 pm #948722
    Mike

    Hi,
    I recommend adding a custom class to each button, and then set a min-height and min-width for them.
    For example this works for your mobile devices when they are lined up:

    @media only screen and (max-width: 767px) { 
a.avia-button {
min-height: 60px !important; 
min-width: 283px !important; 
}
}

    but without the custom class it will affect all of your buttons. Add your custom class before a.avia-button with a space.
    Try the same technique for your desktop view.

    Best regards,
    Mike

    April 29, 2018 at 10:13 pm #948728
    goldengate415

    Hi Mike, thanks I’ll try that. Best, Rob

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