Click here to Skip to main content
15,741,818 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
I was unable to change the width of the button for mobile devices in the media query
help me, please. It works perfectly for the desktop size.

What I have tried:

<div class="btn">
     Get Started
    padding: 25px 80px;
    font-weight: 600;
    border: 1.5px solid var(--green);
    display: inline-block;
    border-radius: 999px;
    color: var(--black);

.btn:hover {
    background-color: var(--green);
    cursor: pointer;
    color: var(--white);
    transition: .2s;

@media screen and (max-width:768px) {
	 .btn {
        display: block;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        font-size: 10px;


@media screen and (max-width:380px) {
	.btn {
        margin: 0;
        margin-top: 50px;
        font-size: 8px;
        transition: .5s;

Updated 25-Jun-21 1:58am
Richard Deeming 9-Jun-21 5:00am    
There is nothing in your CSS which attempts to change either the width or the border of the button in the media queries.

1 solution

make float: none and display: block for that button.

It will make button as container and fit the parent box.

I think it will help you.
Share this answer

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900