Mal wieder responsiv vergaloppiert.

Emess · 2. Oktober 2023

Hallo ich mache gerade die zweite Seite für einen italienischen Bekannten. Um es gleich vorweg zunehmen. Seine Dankbarkeit lässt er in der Hinsicht Raum, dass ich 2 x Im Monat bei ihm im Essen darf. Damit sind wir beide zufrieden.

Ja und mit Flexbox mache ich nach dem Urlaub an meinem eigenen Projekt weiter. Jetzt aber zum Problem.

Ich habe eine ähnliches Bootstraptemplate wie für sein 1. Restaurant gefunden und auch ganz gut angepasst.

Doch leider bin ich wieder in die Falle getappt und habe nicht die alle Media-Querries mit angepasst. Und jetzt habe ich den Faden verloren.

In der PC Ansicht. habe ich nur das Problem, dass ich die Bilder nicht mittig bekomme.

Ansonsten hoffe ich dass mir mit Mediaquerries aus der Patsche helfen kann. Speziell in der Section #team was auf events verweist

Ein Link sagt mehr als tausend Worte.

https://my.emess62.de/

Emess · 2. Oktober 2023

So ich hab jetzt mal auf allen sectionen das "height:100vh;" gestrichen. so ist es ansehbar.

Eigentlich wollte ich dass jede Section die ganze Seite beansprucht und nicht überlappt.

Auch in der mobilen Ansicht sind die Abstände irgenwie willkürlich.

Freue mich auf Hinweise oder Vorschläge

Emess · 3. Oktober 2023

So hier ist wieder alles im Grünen Bereich.

Einzig das Problem mit der Blidausrichtung bekomm ich ums verrecken nicht hin.

ausricht.png

Der Text ist mittig die Bilder nicht.

Aber in den Mobilen Ansichten sie es gut aus.

HTML

     <section id="menu" data-stellar-background-ratio="0.5">
          <div class="container">
               <div class="row">

                    <div class="col-md-12 col-sm-12">
                         <div class="section-title wow fadeInUp" data-wow-delay="0.1s">
                              <h2>Was Sie erwarten können</h2>
                              <!-- <h4>Tea Time &amp; Dining</h4> -->
                         </div>
                    </div>

                    <div class="col-md-4 col-sm-6">
                         <!-- MENU THUMB -->
                         <div class="menu-thumb">
                              <a href="images/menu/antipast.jpg"class="image-popup" title="American Breakfast">
                                   <img src="images/menu/antipast.jpg" class="img-responsive" alt="">

                                   <div class="menu-info">
                                        <div class="menu-item">
                                             <h3>Antipasti</h3>
                                             <!-- <p>Tomato </p> -->
                                        </div>
                                        <!-- <div class="menu-price">
                                             <span>$25</span>
                                        </div> -->
                                   </div>
                              </a>
                         </div>
                    </div>

Alles anzeigen

CSS

 /*---------------------------------------
     MENU              
  -----------------------------------------*/

  #menu {
    padding-top: 3rem;
    padding-bottom: 20rem;
  
  }

  #menu .container {
    width: 80%;
    padding:auto;
  }

  #menu .col-md-4 {
    margin: 0;
    padding-bottom: 20px;
  }

  .menu-thumb img {
    width: 80%;
    transition: 0.5s;
    display: inline-block;
  }

  .menu-thumb:hover img {
    transform: scale(1.15);
  }
  .menu-link{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.8em;
    color: #2e302d;
    text-decoration: none;
  }
  .menu-link:hover{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.8em;
    color: rgb(216, 146, 6);
    text-decoration: none;
    background-color: grey;
  }
  .menu-link:focus{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.8em;
    color: #2e302d;
    text-decoration: none;
  }

  #menu .menu-thumb {
    overflow: hidden;
    position: relative;
    cursor: pointer;
    width: 80%;
  }

  .menu-thumb .menu-info {
    position: absolute;
    top: 60%;
    left: 0px;
    right: 0px;
    bottom: 0px;
    text-align: left;
    padding: 25px 30px;
    transition: 0.5s 0.2s;
  }

  .menu-info .menu-item {
    float: left;
  }

  .menu-info .menu-price {
    float: right;
  }

  .menu-info .menu-price span {
    font-size: 20px;
    font-weight: bold;
    line-height: normal;
    display: block;
    margin-top: 10px;
  }

  .menu-thumb .menu-info h3,
  .menu-thumb .menu-info p,
  .menu-thumb .menu-info span {
    transform: translateY(100%);
    opacity: 0;
    display: block;
    transition: 0.5s 0.2s;
    color: #ffffff;
    z-index: 2;
    position: relative;
  }

  .menu-thumb .menu-info h3 {
    margin-top: 0;
  }

  .menu-thumb .menu-info p {
    color: #d9d9d9;
    text-transform: uppercase;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 1px;
  }

  .menu-thumb:hover .menu-info h3,
  .menu-thumb:hover .menu-info p,
  .menu-thumb:hover .menu-info span {
    transform: translateY(0px);
    opacity: 1;
  }

  .menu-thumb:hover .menu-info {
    background: rgba(0,0,0,0.8);
  }

Alles anzeigen

besser hier

https://my.emess62.de/

m.scatello · 4. Oktober 2023

Erweitere mal

Code

  #menu .menu-thumb {
    overflow: hidden;
    position: relative;
    cursor: pointer;
    width: 80%;
  }

mit

Code

margin: 0 auto;

Wieso überhaupt Bootstrap? Seit CSS sowohl flex als auch grid hat, kann man auf Bootstrap bestens verzichten.

Emess · 4. Oktober 2023

Vielen Dank! Das war es!

Das hatte ich auch probiert. Allerdings so

CSS

margin: auto;

Ohne null.

Worauf bezieht sich die.

Zb,

CSS

margin: 0 0 10px 0

left - top - right - bottom ???

ps.

Mit Flexbox hab ich es auch probiert und kläglich versagt. Da das aber der nächste Part in meinem privaten Projekt ist,

hebe ich den codepen shnippet auf. aber erst fahr ich mit Freunden nochmal 2 Wochen weg

m.scatello · 4. Oktober 2023

Zitat von Emess

left - top - right - bottom ???

Och büdde, es gibt im Internet CSS-Dokus ohne Ende, z.B. https://www.w3schools.com

Einfach selber mal nachsehen: https://www.w3schools.com/css/css_margin.asp

Emess · 4. Oktober 2023

Danke für die Links das hat weitergeholfen.

Kann man das Thema nicht mehr auf gelöst marken? Denn das ist es jetzt.

prodev · 4. Oktober 2023

Zitat von m.scatello

Wieso überhaupt Bootstrap? Seit CSS sowohl flex als auch grid hat, kann man auf Bootstrap bestens verzichten.

Ich schalte mich hier mal als Bootstrap-"Nutzer" ein: Bootstrap kann viel mehr als nur Flex und Grid! Es ist einfach praktisch, vor allem bei kleinen Projekten, schnell eine Grundlage zu haben und nicht erst 100 Zeilen CSS schreiben zu müssen. Außerdem sieht es ziemlich ansprechend aus und es gibt auch diverse Themes, bzw. kann man selbst einfach welche mit SASS erstellen. BS hat also schon seine Berechtigung, abgesehen von einfachen Projekten m.E. hauptsächlich in CMS-Systemen, wo sonst jedes Plugin / Widget seinen eigenen CSS-Styles mitbringen müsste, was die Dateigröße unnötig aufblasen und kein einheitliches Design ergeben würde.

Sempervivum · 4. Oktober 2023

Ich stimme hier im wesentlichen m.scatello zu und es gibt noch einen weiteren Gesichtspunkt: Die Inflation von Containern, die ich im Code von Emess sehe, erschwert die Wartbarkeit und die Fehlersuche: Man muss sich erst Mal darin zurecht finden, um das konkrete Problem hier zu lösen. Dabei kann einiges der Zeit ins Land gehen, die man mit Bootstrap ursprünglich eingespart hat. Jedenfalls wenn man etwas individuelles aufbauen will.

Mal wieder responsiv vergaloppiert.

Jetzt mitmachen!

Teilen

Tags