• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Responsive Problem

burns

Neues Mitglied
Hi Leute
Ich möchte 4 <div> tags so gestallten, dass sie auf Desktop alle nebeneinander und in der Mitte der Page sind. Auf Tablet sollen es zwei Spaten und zwei Reihen sein und auch wieder in der Mitte der Page. Auf Smartphone sollen alle untereinander und wieder mittig sein.

Ich bekomme auch beides hin....leider jedoch nicht gleichzeitig....sondern entweder oder.

Ich hab mittlerweile alle verschieden Varianten einer CSS-basierten responsive Gestaltung ausprobiert die ich finden konnte...leider ohne Erfolg.

Die nachfolgende Version ist die Beste die ich bis jetzt hinbekommen habe. Jedoch habe ich hier das Problem, dass auf Desktop und Smartphone alles super ist, leider aber nicht auf Tablet. Dort habe ich nicht 2+2 sondern wie am Smartphone alle untereinander.

Ich hoffe jemand von euch kann mir helfen!

HTML:
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style type="text/css">
.frame {
    background: #FAFBFC;
    display: flex;
}
.inner-frame {
    margin: 0 auto;
    margin-top: -10px;
}


@media only screen and (max-width: 1270px) {
    .w3-quarter{
        float: none; /*original here is written float: left;. so no center is possible*/
    }
}



.box {
    width: 275px;
    border: 1px;
    background: #FDFDFE;
    border-style: solid;
    border-color: #e8e8e8;
    background: #ffffff;
    text-align: center;
    margin: 14px;
}
p.box-title {
    padding-top: 10px;
    font-size: 22px;
    font-weight: bold;
}
img.image-radius {
    border-radius: 100%;
    width: 120px;
    height: 120px;
}
p.text-padding {
    padding-top: 10px;
    padding-right: 20px;
    padding-left: 20px;
    font-family: "Helvetica";
    font-size: 20px;
}
p a.mehr-button {
    color: #ffffff;
    background-color: #00749F;
    padding: 0px 30px;
    border: none;
    text-align: center;
    display: inline-block;
    font-size: 19px;
    cursor: pointer;
    border-radius: 100px;
    font-weight: bold;
}
</style>

<div class="frame">
    <div class="inner-frame w3-row-padding">
        <div class="box w3-quarter">
            <p class="box-title">Header 1</p>
            <img src="" title="" alt="" class="image-radius">
            <p class="text-padding">
                QJfejfnejkfew klenfew kjqnd klqned jk qlkdnkj jk djkjkjbd lkjlkwqn qlwkd.
            </p>
            <p>
            <a href="#" class="mehr-button">mehr</a>
            </p>
        </div>
        <div class="box w3-quarter">
           <p class="box-title">Header 2</p>
           <img src="" title="" alt="" class="image-radius">
           <p class="text-padding">
                alkdjfbhre iujk oifhewu ifhewli2 rjewn klfewnew qlkjeeknf elkfh hqedj qjhekjej eoihdfe.
            </p>
            <p>
            <a href="#" class="mehr-button">mehr</a>
            </p>
        </div>
        <div class="box w3-quarter">
            <p class="box-title">Header 3</p>
            <img src="" title="" alt="" class="image-radius">
            <p class="text-padding">
                kasjbhfwe jqwbe ek jkqbdeeqwje kjqbe kjqbd  jkdbenkdejk kjqbq jkqwbj  ejkdbe.
            </p>
            <p>
            <a href="#" class="mehr-button">mehr</a>
            </p>
        </div>
        <div class="box w3-quarter">
            <p class="box-title">Header 4</p>
            <img src="" title="" alt="" class="image-radius">
            <p class="text-padding">
                EWNfh wqkjdb e djewdqekj djhewd qwjk qjks es dkoqweeqjd qdje  ejde  qwmd eq we.
            </p>
            <p>
            <a href="#" class="mehr-button">mehr</a>
            </p>
        </div>
    </div>
</div>
 
Werbung:
Werbung:
Zurück
Oben