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?
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:
Hopefully that helps 
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:
Thank you once again, This worked for me!
1 Like