Button width resize wonky in tablet view

Support
#1

Hi,

the buttons at setup.sarahmccrum.com resize as expected, except on vertical tablet size – see screenshot. Any idea what might cause this? All buttons are setup identical, same template applied.

Thank you & kind regards, c

#2

Hi Princias,

Thanks for writing in!

Look like you have added the buttons to separate columns, which is causing the issue. As columns are responsive and break only in certain break points.

The only way to fix the issue is please create two rows with a single column each, and put button 5 buttons in each row.
You can manage the spacing with the margin of the buttons.

Give a minimum width to the buttons so that it wouldn’t resize till the width and break to below when you check in a smaller device.

Hope this helps!

#3

Thanks, Basanta

Did as you suggested. Looks better on tablet view, but the buttons still differ slightly in width, and now they also show up with differing widths in mobile, even though all settings are identical. Is there a way to have all buttons have the same relative size on all screens, while also having a reasonable size for the respective viewport?

Kind regards,
c

#4

Hey @princias,

That would be possible using custom CSS Flexbox. Here’s a sample setup: https://youtu.be/kRUYBX5JNyc. The setup in the video is close to what you have now because the Image element is an inline element like the Button.

You should set the width of the buttons to 100% so it will follow the width of the column.

Just note that this currently requires custom CSS which we could not help much with as this usually veers into custom development. With that said, I’d recommend that you personally learn Flexbox starting from our tutorial at https://theme.co/apex/forum/t/using-flexbox/24851

In the future, more layout options will be available in the builder so you won’t have to code. Specifically, I’m referring to the CSS Grid Spec which was mentioned in our December Status Report: https://theme.co/apex/forum/t/status-report-december-4-2018/48648

Thanks.

#5

Thanks, Christian!

#6

You’re welcome. :slight_smile:

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.