CODEWITHSUNDEEP
htmlcssresponsive-designmedia-queries
Rashmi S
Rashmi S

Reputation: 55

media query for html button

Hi I want to align both the button horizontally on same line in media screen. Please help me with css. Following is the code that I am trying.

    <div class="ctext-wrap">
      <button type="button" class="btn offert-btn btn-next">Mer information<br></button>
      <button type="button" class="btn btn-previous offert-btn">Föregående<br></button>
    </div>

    .ctext-wrap {
        max-width: 100%;
    }
    .ctext-wrap {
        max-width: 50%;
        margin: 0px auto;
        text-align: left;
    }


    .btn-next {
        float: right;
        min-width: 130px;
    }

    .offert-btn {
        display: inline-block;
        background: #213156 !important;
        color: #fff !important;
        font-weight: bold !important;
        text-decoration: none !important;
        margin-bottom: 20px !important;
        border-radius: 0 !important;
    }

@media screen and (max-width: 768px)
.ctext-wrap {
    max-width: 100%;
}

Upvotes: 1

Views: 10280

Answers (2)

ketan
ketan

Reputation: 19341

I think you need to use display:flex in .ctext-wrap and justify-content: space-between;.

I will make what you want without using media query.

.ctext-wrap {
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    max-width: 50%;
    text-align: left;
}

Working Fiddle

Upvotes: 0

MIke
MIke

Reputation: 619

This CSS work below 768px.

Use this fiddle here

Added this CSS:

@media screen and (max-width: 768px) {
.ctext-wrap .btn {
    display: block;
    width: auto;
    float: none;
}

Upvotes: 2

Related Questions