htmlボタンのメディアクエリ

Question

こんにちは私は両方のボタンをメディア画面の同じ行に水平に整列させたいと思います。 CSSで私を助けてください。以下は、私が試しているコードです。

<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%; 
} 

Answer 1

このCSSは768px以下で動作します。

使用このフィドルhere

追加このCSS：

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

Answer 2

私はあなたが.ctext-wrapとjustify-content: space-between;でdisplay:flexを使用する必要があると思います。

メディアクエリを使用せずに、あなたが望むものを作っていきます。あなたが同じ行にあるボタンをしたい画面サイズ

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

Working Fiddle