Streaming live at 10am (PST)

Trouble with Buttons

Hello - I am trying to create buttons on the home page of my website. The issue I am having is having trouble formatting the buttons so the sizing is the same across all of them and across different screens (smartphones, tablets. etc.) Can someone help?

https://preview.webflow.com/preview/zeeshans-initial-project-c594c4?utm_medium=preview_link&utm_source=dashboard&utm_content=zeeshans-initial-project-c594c4&preview=6f9e5df8dcf6ba6c7cc21a3f73a5fb99&mode=preview

Welcome to the community @Zeeshan1!

The preview link you included is showing a 404—can you confirm that the link is correct and you still have the share link enabled in the project?

Thanks for the quick reply. Does this work? https://preview.webflow.com/preview/zeeshans-initial-project-c594c4?utm_medium=preview_link&utm_source=dashboard&utm_content=zeeshans-initial-project-c594c4&preview=7151f02f8289fe2c051e81a8664aa255&mode=preview

Yep that works, thanks for the updated link.

The easiest way to get this working as you’re expecting is to set the height of the “HomePageButton” element to 100%, display: flex, and choose center for the align/justification:

Once you get down to the mobile landscape breakpoint you’ll probably want to adjust the button Grid parent element to only have 2 columns and then a single column for the mobile portrait breakpoint:

image

Hopefully that helps :+1:

This is very helpful, thank you so much! Another question I have is when I change to mobile view, is there a way to make it so the buttons are all still the same size (even though some are bigger than others because they have more text?). Should I manually change the grid size?

Also, how can I avoid this button going into the next section in mobile view as seen below:

You can fix the button sizing on mobile by setting the height of your grid rows to “1FR”:

The buttons overflowing to the next section can be fixed by setting the height of the “Hero Overlay” element to auto and the max-height to none:

image

Thank you once again, This worked for me!

1 Like