Hi Leute
ich hab ein kleines Problem mit Responsive Design!
Ich möchte, dass mein Inhalt IMMER in der Mitte der Seite ist. Auf Desktop sollen es eine Reihe mit 4 Spalten sein, für Tablet 2 Reihen mit 2 Spalten und für Smartphone 4 Reihen in einer Spalte.
Es funktioniert auch beides...aber leider nicht gleichzeitig (ich schätze mal es liegt an float:left; und display: flex; - leider finde ich dafür keine alternative). Vll. hat ja einer von euch eine Lösung für mein Problem.
Hier mal der Code:
Code
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style type="text/css">
.frame {
background: #FAFBFC;
display: flex; /*only way for center?*/
}
.inner-frame {
margin: 0 auto; /*only way for center?*/
margin-top: -10px;
}
/*here is my problem. if i remove this part, responsive design work but it's not in center of the page (only if it's bigger than 1270px). With this part, it's in center, but it jumps directly from column to row.
What i want: on full width 4+1 column and row, smaler than 1270px (tablet) 2+2 column and row, smaller (smartphone) 1+4 column and row. And it need to be everytime in center of page!!!*/
@media only screen and (max-width: 1270px) {
.w3-quarter{
float: none; /*original here is writen float: left;. so no center is posible*/
}
}
/*end*/
.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>