Ergebnis 1 bis 2 von 2

Thema: Bilderübersicht in mobiler Version

  1. #1
    HTML Newbie
    Registriert seit
    07.09.2016
    Beiträge
    1
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Bilderübersicht in mobiler Version

    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:

    HTML-Code:
     <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;">

    and the css-code for the dektop overview:

    Code:
    .angebote {
      float: left;
      margin: 0% 0% 0% 0.52%;
      overflow: hidden; }

    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:

    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
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Meister(in)
    Registriert seit
    24.02.2007
    Beiträge
    460
    Danke
    0
    Bekam 47 mal "Danke" in 47 Postings

    Standard AW: Bilderübersicht in mobiler Version

    Bietest du wirklich Webdesign an, oder ist es eine Beispielseite?
    Geändert von djheke (07.09.2016 um 22:47 Uhr)

  3. Folgende User finden die Antwort von djheke gut:


Ähnliche Themen

  1. position:fixed; in mobiler Darstellung
    Von AnyKey im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 30.03.2016, 19:57
  2. Problem mobiler Browser - Background-size: cover
    Von TodayIn im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 27.05.2014, 16:21
  3. Tutorials zur Erstellung mobiler Websites
    Von Unregistriert im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 28.01.2013, 16:57
  4. User einer alten plone version in neue version importieren?
    Von Unregistriert im Forum Zope & Plone - das deutsche Hilfeforum
    Antworten: 1
    Letzter Beitrag: 04.05.2010, 13:17
  5. Mobiler Internetzugang über GPRS
    Von Crisu im Forum Computer - Internet Forum
    Antworten: 0
    Letzter Beitrag: 13.07.2005, 12:44

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •