Hallo liebe Forumgemeinde, ich habe die unten erläuterte Problemstellung und freue mich, wenn ihr mir helfen könnt! Sorry, dass das Thema in Englisch verfasst ist...
I did an overview of three products on my website: http://www.restaurants-im-web.de/ . I want to show my offer with two images and one video in a row. You can see it on the page "Über Uns". I am satisfied with the solution, but I dont know how to get the same overview in the reponsive view.
Her is my html-code for the desktop overview:
<div class="klein">
<div class="angebote">
<a href="http://www.restaurants-im-web.de/basis-paket/" target="_blank"><img src="http://www.restaurants-im-web.de/wp-content/uploads/2016/09/website_basis_k.png" alt="Basis Website" width="374" height="253" class="alignnone size-full wp-image-139" /><figcaption><center>Basis-Website</center></figcaption></a>
</div>
<div class="angebote">
<a href="http://www.restaurants-im-web.de/komfort-paket/" target="_blank"> <video src="http://www.restaurants-im-web.de/wp-content/uploads/2016/09/website_komfort_k.mp4" autoplay loop style="display:block;"></video><figcaption><center>Komfort-Website</center></figcaption></a>
</div>
<div class="angebote">
<a href="http://www.restaurants-im-web.de/premium-paket/" target="_blank"><img src="http://www.restaurants-im-web.de/wp-content/uploads/2016/09/website_premiume_k.png" alt="Premium-Website" width="374" height="253" class="alignnone size-full wp-image-144" /><figcaption><center>Premium-Website</center></figcaption></a>
</div>
</div>
<br style="clear:both;">
Alles anzeigen
and the css-code for the dektop overview:
I tried already to alter the size of pictures and description on the mobile phone view, but I don't know exactly, which elements I should address with the class: .klein
This is the code:
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
.klein {width: 10% ;}
}
How can I get the overview in the mobile phone smaller, Which elements do I have to address?
Thank you very much for your help!
Maria