Ergebnis 1 bis 2 von 2

Thema: Responsive Problem

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

    Standard Responsive Problem

    Hi Leute

    ich hab ein kleines Problem mit Responsive Design!
    Ich möchte, dass mein Inhalt IMMER in der Mitte der Seite ist. Auf Desktop sollen es eine Reihe mit 4 Spalten sein, für Tablet 2 Reihen mit 2 Spalten und für Smartphone 4 Reihen in einer Spalte.
    Es funktioniert auch beides...aber leider nicht gleichzeitig (ich schätze mal es liegt an float:left; und display: flex; - leider finde ich dafür keine alternative). Vll. hat ja einer von euch eine Lösung für mein Problem.

    Hier mal der Code:

    Code:
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <style type="text/css">
    .frame {
        background: #FAFBFC;
        display: flex; /*only way for center?*/
    } 
    .inner-frame {
        margin: 0 auto; /*only way for center?*/
    	margin-top: -10px;
    }
    
    
    /*here is my problem. if i remove this part, responsive design work but it's not in center of the page (only if it's bigger than 1270px). With this part, it's in center, but it jumps directly from column to row.
    What i want: on full width 4+1 column and row, smaler than 1270px (tablet) 2+2 column and row, smaller (smartphone) 1+4 column and row. And it need to be everytime in center of page!!!*/
    @media only screen and (max-width: 1270px) {
        .w3-quarter{
            float: none; /*original here is writen float: left;. so no center is posible*/
        }
    }
    /*end*/
    
    
    
    
    .box {
        width: 275px;
        border: 1px;
        background: #FDFDFE;
        border-style: solid;
        border-color: #e8e8e8;
        background: #ffffff;
        text-align: center;
        margin: 14px;
    }
    p.box-title {
        padding-top: 10px;
        font-size: 22px;
        font-weight: bold;
    }
    img.image-radius {
        border-radius: 100%;
        width: 120px;
        height: 120px;
    }
    p.text-padding {
        padding-top: 10px;
        padding-right: 20px;
        padding-left: 20px;
        font-family: "Helvetica";
        font-size: 20px;
    }
    p a.mehr-button {
        color: #ffffff;
        background-color: #00749F;
        padding: 0px 30px;
        border: none;
        text-align: center;
        display: inline-block;
        font-size: 19px;
        cursor: pointer;
        border-radius: 100px;
        font-weight: bold;
    }
    </style>
    
    
    <div class="frame">
        <div class="inner-frame w3-row-padding">
            <div class="box w3-quarter">
                <p class="box-title">Header 1</p>
                <img src="" title="" alt="" class="image-radius">
                <p class="text-padding">
                    QJfejfnejkfew klenfew kjqnd klqned jk qlkdnkj jk djkjkjbd lkjlkwqn qlwkd.
                </p>
                <p>
                <a href="#" class="mehr-button">mehr</a>
                </p>
            </div>
            <div class="box w3-quarter">
               <p class="box-title">Header 2</p>
               <img src="" title="" alt="" class="image-radius">
               <p class="text-padding">
                    alkdjfbhre iujk oifhewu ifhewli2 rjewn klfewnew qlkjeeknf elkfh hqedj qjhekjej eoihdfe.
                </p>
                <p>
                <a href="#" class="mehr-button">mehr</a>
                </p>
            </div>
            <div class="box w3-quarter">
                <p class="box-title">Header 3</p>
                <img src="" title="" alt="" class="image-radius">
                <p class="text-padding">
                    kasjbhfwe jqwbe ek jkqbdeeqwje kjqbe kjqbd  jkdbenkdejk kjqbq jkqwbj  ejkdbe.
                </p>
                <p>
                <a href="#" class="mehr-button">mehr</a>
                </p>
            </div>
            <div class="box w3-quarter">
                <p class="box-title">Header 4</p>
                <img src="" title="" alt="" class="image-radius">
                <p class="text-padding">
                    EWNfh wqkjdb e djewdqekj djhewd qwjk qjks es dkoqweeqjd qdje  ejde  qwmd eq we.
                </p>
                <p>
                <a href="#" class="mehr-button">mehr</a>
                </p>
            </div>
        </div>
    </div>

  2. #2
    Samurai
    Registriert seit
    23.01.2018
    Ort
    Minden
    Beiträge
    234
    Danke
    0
    Bekam 31 mal "Danke" in 31 Postings

    Standard AW: Responsive Problem

    meinst du das so ungefähr
    https://codepen.io/basti1012/pen/aXJVGL?editors=1100

    musst nur die größen wieder ändern weil mit meinen kleinen Bildschirm konnte ich das nur so testen. aber der wechselt die container anordnung so wie du es wolltest bei 3 verschiedene größen

Ähnliche Themen

  1. Responsive Frage
    Von nadjak im Forum HTML & CSS Forum
    Antworten: 9
    Letzter Beitrag: 29.02.2016, 15:02
  2. responsive -> PDF und Footer
    Von TanjaP. im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 19.09.2015, 14:13
  3. Responsive Design Problem!!! Suche Hilfe!!!
    Von Kevin Brandao da Graca im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 26.05.2014, 17:08
  4. Responsive Bilder mit CSS und PHP
    Von klopp1991 im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 09.05.2014, 22:15
  5. Responsive Design Problem
    Von hugo22 im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 26.02.2014, 03:20

Stichworte

Berechtigungen

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