Html Question posted in
Some basic documentation can be found here.

Html – How to expand button to full-width on smaller screen sizes?

I have the following markup:

<div class="ml-auto text-right">
    <button class="btn btn-next mobile" />
</div>

And css:

@media screen and (max-width: 576px) {
  .mobile {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    display: block;
    text-align: center;
  }
}

I would like to display the button aligned right on desktop and expand to full width on mobile.

However, the above is not working.

What is the correct way to achieve this?

Tags:

4

Answers


  1. 0

    by using the common mobile-first approach you can simplify things:

    here’s the pen

    
/* defaults to full width */
.mobile {
  width: 100%;
}

/* changes when certain dimensions is passed - note how we changed this from "max-with" to "min-width" */
@media screen and (min-width: 576px) {
  .mobile {
    width: auto;
  }
}
    Login or Signup to reply.
  2. 0

    Try this updated CSS, use the parent class to avoid any conflict

    @media screen and (max-width: 576px) {
      .mobile {
        width: 100%;           
        margin: 0 auto;        
        padding: 0.5rem 1rem;  
        display: block;        
        text-align: center;   
      }
    
      .ml-auto {
        margin-left: auto;    
      }
    
      .text-right {
        text-align: initial;
      }
    }
    Login or Signup to reply.
  3. 0

    The provided code does not affect your requirement. You need to add CSS to the button div container.

    In the HTML add a class for button container div.

    <div class="ml-auto text-right button-container">
    <button class="btn btn-next mobile">Next</button>
</div>

    Add the CSS for the container to be right aligned in desktop. Your mobile media query handles the mobile screen where it will occupy the full width.

    .button-container {
    display: flex;
    justify-content: flex-end;
}

@media screen and (max-width: 576px) {
  .mobile {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    text-align: center;
  }

  .button-container {
    justify-content: center;
  }
}

    I have tried the above code: https://jsfiddle.net/rekhaDarshna/yv4fg9ew/

    Let me know if there is anything missing.

    Login or Signup to reply.
  4. 0 
    .mybtn {
            display: block;
            background-color: green;
            color: beige;
            width: 100%;
            height: 50px;
            font-size: 30px;
            border-radius: 40px;
            border: none;
        }
    <html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,
                                   initial-scale=1.0">
    <title>Full Width Button</title>
    
    </head>

<body>
    <button class="mybtn">
        Full Width Button
    </button>

</body>

</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search