Huhu,
also ich habe mir ja zusammen mit Matze eine Box auf der Dashboardseite gebaut die 2 Spalten hat.
Die linke Spalte beinhaltet eine Grafik die responsive ist und die rechte die aktuellen Kalendereinträge / Forumaktivität.
Das Template für die Kalendereinträge sieht so aus:
PHP
<div class="dashboardBox containerPadding marginTop">
<fieldset>
<legend style="margin: 0 0 0 -10px;">{lang}wcf.dashboard.box.com.woltlab.calendar.content.upcomingEvents{/lang}</legend>
<div class="event_image">
<a href="https://www.knopfstadt.de/calendar/?weekly/"><img class="img_event" src="/pictures/event_image.png" width="300" height="300"></a>
</div>
<div class="event_content">
{include file='eventDateList' application='calendar' objects=$eventDateList}
<a href="https://www.knopfstadt.de/calendar/?weekly/"><button class"small">Weitere Termine</button></a>
</div>
</fieldset>
</div>
<div class="clearfix"></div>
Alles anzeigen
und das passende CSS so:
CSS
/* Event_DashboadBox */
.event_image {
width: 30%;
float: left;
padding: 10px;
}
.event_content {
width: 65%;
float: left;
padding: 10px;
}
.img_event {
display: block;
margin-left: auto;
margin-right: auto;
max-width: 100%;
height: auto;
}
Alles anzeigen
Nun habe ich es versucht mit den Media Queries, nur hatte ich bisher das Problem das die Grafik zwar verschwindet unterhalb 800px aber der Content auf 65% blieb und somit ein unschöner Rand von 35%px entstand.
Ich habe das partou nicht hinbekommen trotz mehrfachen googlen und hoffe ihr könnt mir helfen.
LG