Changing the width of a button - Responsive webpage (bulma) - html

Question

I am trying to make my page responsive and I would like in the mobile version of the page to change the width of a button to take up the whole width of the page. This is how the desktop version should look:
And this is the mobile version how it should look:
I can't figure out how to change my button so that it takes part all the screen width using bulma. This is my code:
<div className="buttons mt-6 mx-4 is-justify-content-space-between">
<button className="button has-background-link has-text-white has-text-weight-bold" style={{ borderRadius: 10 }}>
<span className="mx-4">Back</span>
</button>
<button className="button has-background-primary has-text-white has-text-weight-bold" style={{ borderRadius: 10 }}>
<span>Go to Basket</span>
</button>
</div>
I have tagged HTML, CSS and Bulma because I am not sure which of the following could solve the problem, as I am using bulma but this is an external problem to bulma reactiveness

Answer 1

You could also use #media tags in CSS.
<style>
/* Default Styling */
.button {
width: 300px;
}
/* Only applies if the window with is under 600px */
#media only screen and (max-width: 600px) {
.button {
width: 100%;
}
}
</style>
<div className="buttons mt-6 mx-4 is-justify-content-space-between">
<button className="button has-background-link has-text-white has-text-weight-bold" style={{ borderRadius: 10 }}>
<span className="mx-4">Back</span>
</button>
<button className="button has-background-primary has-text-white has-text-weight-bold" style={{ borderRadius: 10 }}>
<span>Go to Basket</span>
</button>
</div>

Answer 2

Try This
#test {
width: 100%;
min-width: 50px; // add this if you want
max-width: 300px; // add this if you want, adjust accordingly
}
<div className="buttons mt-6 mx-4 is-justify-content-space-between">
<button id="test" className="button has-background-link has-text-white has-text-weight-bold" style={{ borderRadius: 10 }}>
<span className="mx-4">Back</span>
</button>
<button id="test" className="button has-background-primary has-text-white has-text-weight-bold" style={{ borderRadius: 10 }}>
<span>Go to Basket</span>
</button>
</div>