I am in the midst of making my project responsive, and for this I want to align buttons which are normally next to each other align from top to bot when the screen gets smaller.

This are the buttons at the moment: https://i.stack.imgur.com/B7a46.png

This is the code for them:

<form >
.
.
. 
</form>

I am using tailwind css and tried adding css code like sm:grid sm:grid-rows-4 - and then adding for every button something like this: sm:row-start-1 but then also on normal screen size there is a huge space generated between the buttons and the content beneath it.

Any input appreciated!

CodePudding user response：

I know how to do it in basic CSS
Add this class(change the name if required) to your form

.form {
display: flex;
flex-direction: column;  <!-- To make them aligned vertically -->
justify-content: space-evenly;  <!-- To make them spaced evenly -->

}

Add this class(change the name if required) to you buttons

.button {
padding: 10px 20px;  <!-- Change the padding to your liking -->
}

To make them align vertically when screen size is suppose 600px

@media (max-width:600px)  <!-- To make them aligned vertically till the width of the screen is 600px -->
 {
.form {
display: flex;
flex-direction: column;  <!-- To make them aligned vertically -->
justify-content: space-evenly;  <!-- To make them spaced evenly -->
}
.button {
padding: 10px 20px;  <!-- Change the padding to your liking -->
}
}