Hallo zusammen,
ich habe auf der Startseite drei Boxen eingebaut mit Unterschiedlichem Textinhalt. Auf meinem PC sah es gut aus, doch in der Vorstellung hat mich Gabbid drauf aufmerksam gemacht das die Boxen nicht gleich lang sind. Habe daraufhin mal den Browser verkleinert und sah dann die unterschiede sehr gut.
Hier mal Bilder damit ihr seht was ich meine.
So so sieht esauf meinem PC aus
Wenn ich den Browser verkleinere wird es unterschiedlich, je kleiner ich ihn mache um so grösser wird der Unterschied der Boxen
Erst wenn ich ihn recht klein habe sehe ich die Boxen untereinander.
Habe die Boxen in einer eigenen Dashboardbox erstellt. Der Code dazu sieht so aus
<br /><center><FONT SIZE="4"><b>Das bietet dir das "Seelensturm" Selbsthilfeforum:</b></FONT></center>
<div class="iconBox grid33 grid marginTop">
<div class="circleBig">
<span class="icon icon48 icon-comments" style="color:#fff"></span>
</div>
<div>
<header class="boxSubHeadline">
<a href="/index.php/BoardList/"><font color="#CD5C5C"><h2>Austausch</h2></font></a>
</header>
</div>
[align=justify]<div class="textBox">Der Austausch steht bei uns an erster Stelle.
Ob Forum, Tagebuch oder Chat, du kannst dich so äußern und einbringen, wie du es möchtest.
Und klar, gerne auch zu allen anderen Themen von A bis Z.[/align]</div>
</div>
<div class="iconBox grid33 grid marginTop">
<div class="circleBig">
<span class="icon icon48 icon-comments" style="color:#fff"></span>
</div>
<div>
<header class="boxSubHeadline">
<a href="/easylink/index.php/Overview/"><font color="#2E8B57"><h2>Hilfe</h2></font></a>
</header>
</div>
[align=justify]<div class="textBox">Bei uns wird Hilfe großgeschrieben.
Neben konkreten Adressen kannst du weitere wichtige Links finden
und auch Tipps rund um die Alltagsbewältigung und das Leben mit einer Diagnose erhalten.[/align]</div>
</div>
<div class="iconBox grid33 grid marginTop">
<div class="circleBig">
<span class="icon icon48 icon-comments" style="color:#fff"></span>
</div>
<div>
<header class="boxSubHeadline">
<a href="/index.php/Board/28-Traumabereich/?"><font color="#4682B4"><h2>Unterstützung</h2></font></a>
</header>
</div>
[align=justify]<div class="textBox">Wir sind da, in allen Lagen.
Bei uns gibt es keine Sprechzeiten, keinen Teilnahmezwang
und auch keine unerwünschte Therapie, denn wir sind keine Ärzte.
Wir sind Betroffene, daher wissen wir, wie alleine man sich fühlen kann.[/align]</div>
</div>
<div style="clear: both;"> </div>
<style type="text/css">
.container {
border: none;
}
.textBox {
padding: 10px;
}
.iconBox {
background: rgba(0,0,0,0.05);
padding: 10px;
text-align: center;
color: rgba(0,0,0,0.6);
}
.boxSubHeadline h2 {
font-size: 2rem !important;
}
.iconBox h2 {
font-weight: 300 !important;
}
.circleBig {
display: inline-block;
width: 80px;
height: 80px;
border-radius: 60px;
background-color: #e74c3c;
text-align: center;
line-height: 100px;
}
@media (min-width: 801px) {
.grid33 {
width: 33%;
}
}
@media (min-width: 801px) {
.grid {
float: left;
box-sizing: border-box;
}
}
</style>
<br />Hat jemand eine Idee, einen Tipp, was ich noch in den Code einbauen muss damit die Boxen gleich gross bleiben, egal wie klein ich den Browser einstelle?
Das ganze teste ich erst mal im Testboard
Vielen dank im Voraus für eure Hilfe
Lg Seele
Nun werden die Boxen gleich gross angezeigt, wenn ich den Browser verkleinere.
Du hast ja schon oft mit nützlichen Code-Erklärungen geholfen und ich weiß, dass du dir alles selber beigebracht hast, aber so unter uns hier, wenn ich gerade solche Dinge nachschlagen wollte, wo würde ich das tun, hast du eventuell einen Tipp parat?
