Make buttons move to a new line on mobile

  • Resolved mj33777

    (@mj33777)


    3 years, 5 months ago

    Hello,
    I’m happy for my buttons to be in a row on desktop but it doesn’t look great on mobile always. I’d like to be able to tell some of the buttons to go onto a new line on mobile.
    I’ve worked out how to put the custom class on each button (as this doesn’t need to be global, it’s only an issue on some pages), and I know how to do media queries. I just can’t work out how to make a button go to a new line.

    Can anyone help?
    Thanks in advance.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hi @mj33777!

    I checked your page on mobile and the category buttons like “theatre”, “frost/nixon (play)”, “film” already appear split on two rows, so I’m not sure which buttons you are referring to. Could you please tell us or provide a screenshot with the buttons you would like to move?

    Thank you!

    Thread Starter mj33777

    (@mj33777)

    Hello @luciamarinescu,

    Thank you for replying to me!

    I would like it to look like this https://paste.pics/c9090795492e54f964f4f89281e8acb0
    (this is a photoshop)

    Basically where there are fewer buttons on other pages, having them in a row is fine, but on pages with lots of buttons I would like them to be paired like this.

    So I have put a custom class on each button, I just need to work out how to tell them with CSS to form into pairs like this on different lines.

    I’m not sure if it’s possible.

    Thanks for your help.

    Thread Starter mj33777

    (@mj33777)

    An update: I figured this isn’t possible, so I have improved things by making the buttons smaller on mobile, so it’ll do for now.
    Cheers.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Make buttons move to a new line on mobile’ is closed to new replies.