Css ufak bir yardım

Dostlar selam,
Ufak bir css yardıma ihtiyacım var. Müsait olan bakabilir mi?



Webde böyle görünüyor. Mobilde de üstteki gibi görünmesini istiyorum.



Mobilde altalta sıralıyor.
Yanyana aldığımda da sayfadan taşıyor.

  


/* Genel stiller */
.swapp {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 15px;
}

.swapp label {
    margin-right: 10px;
    font-size: 18px;
}

#nereden,
#nereye {
    padding: 10px;
    font-size: 18px;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 200px;
    text-align: center;
    font-size: 22px;
}

#swapButton,
.swap-class {
    font-size: 18px;
    padding: 10px 16px;
    background-color: #4c81af;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

#swapButton:hover,
.swap-class:hover {
    background-color: #396d9a;
}

/* Mobil stiller */
@media (max-width: 600px) {
    .swapp {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    .swapp label {
        margin-bottom: 10px;
    }

    #nereden,
    #nereye {
        margin: 0 10px;
    }
}

nereden nereye idsine
width 50% verdim sorun çözüldü

width değerleri ile ilgili, onları düzenleyip deneme yapabilirsin mobil için

teşekkür ederim kaf sin kaf

Bu sorun devam ediyor çözülmedi

Responsive isteniyor mutlaka flex kullanılmalı. Küçük bir örnek hazırladım. Bu örnek içinde bulunduğu container'e farklı şekillerde görünebilir. Bu yüzden container'in de flex olması veya genişliğinin %100 olması önemli.

hocam teşekkür ederim elinize sağlık