h1 responsive machen

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

martinatina

Neues Mitglied
26 August 2020
16
0
1
19
Hallo!


Wie schaffe ich es dass meine Überschrift genau wie die 3 Bilder unten responsive wird?
Also das am Ende alles den selben Abstand außen hat egal wie ich die Seite vergrößere (Ich bin mega schlecht im Erklären, ich weiß)
Ich muss einfach den Wrapper irgendwie so hinbekommen dass er (wenn dann nur noch 2 Bilder nebeneinander beim verkleinern sind ) mit dem Bildern auf einer breite?? abschließt
Vielleicht versteht ja irgendwer was gemeint ist :D
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.103
408
83
67
Versuche es mit diesem CSS:
CSS:
        /*Header*/

        .header {
            max-width: 1460px;
            align-items: center;
            display: flex;
            height: 60px;
            margin: 0 auto;
            justify-content: space-between;
        }





        a {
            text-decoration: none;
            color: black;
        }



        /*NAV NEU*/


        .navbar {
            display: flex;
            position: relative;
            justify-content: space-between;
            align-items: center;
            color: black;
            margin-right: 30px;
            margin-left: 30px;
            width: 1460px;
        }

        .brand-title {
            font-family: 'Josefin Sans', sans-serif;
            font-weight: 500;
            font-size: 11pt;

            top: .75rem;
        }

        .brand-title :hover {
            color: #e6aaaa
        }

        .navbar-links {
            height: 100%;
        }

        .navbar-links ul {
            display: flex;
            margin: 0;
            padding: 0;
        }

        .navbar-links li {
            list-style: none;
            font-family: 'Josefin Sans', sans-serif;
            font-weight: 500;
            font-size: 11pt;
        }

        .navbar-links li a {
            display: block;
            text-decoration: none;
            color: black;
            padding: 1rem;
        }

        .navbar-links li :hover {
            color: #e6aaaa
        }

        .toggle-button {
            position: absolute;
            /*top: .5rem;*/
            right: 1rem;
            display: none;
            flex-direction: column;
            justify-content: space-between;
            width: 30px;
            height: 21px;
        }

        .toggle-button .bar {
            height: 3px;
            width: 100%;
            background-color: black;
            border-radius: 10px;
        }




        /*Überschriften*/

        h1 {
            font-family: 'Josefin Sans', sans-serif;
            font-weight: 500;
            font-size: 20pt;
            margin-bottom: 15px;
            margin-top: -23px;
        }


        h2 {
            font-family: 'Lato', sans-serif;
            font-size: 11.5pt;
            font-weight: 400;
            width: 400px;
            line-height: 17.5pt;
        }

        h4 {
            font-family: 'Lato', sans-serif;
            font-size: 11.5pt;
            font-weight: 400;
            width: 350px;
            line-height: 17.5pt;
            margin-top: 0
        }

        figure {
            margin: 0px;
        }

        /*Gitter in dem Projektbilder sind*/


        .grid-container {
            margin-top: 60px;

            grid-column-gap: 29.5px;
            grid-row-gap: 29.5px;

            display: grid;
            /* ---> */
            /* grid-auto-rows: 326.6px; */

            /* ---> */
            /* grid-template-columns: repeat(auto-fill, 326.6px); */
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));


            justify-content: center;

            max-width: 1000px;



            grid-gap: 10px;

        }

        /*Bilder der Projekte*/

        .Gitterbilder {
            /* ---> */
            /* width: 313.5px; */
            width: 100%;
        }

        /*Fade Effekt bei Hover*/

        .Gitterbilder {
            opacity: 1;
            transition: .5s ease;
        }

        /*Text beim Hovern aka Projektnamen*/

        .content {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 60px;
            color: #fff;
            white-space: nowrap;
            overflow: hidden;

        }

        .content a {
            font-size: 12pt;
            display: block;
            text-align: center;
            padding: 10px;
            cursor: pointer;
            font-family: 'Josefin Sans', sans-serif;
            text-transform: uppercase;
            line-height: 22px;

        }

        .overlay {
            opacity: 0;
        }

        .grid-item:hover img {
            opacity: .1;
        }


        .grid-item:hover .overlay {
            opacity: 1;
        }


        .grid-item:hover .content a {
            color: black;
        }

        .grid-item {
            position: relative;
        }

        .wrapper {
            max-width: 1000px;
            /* ---> */
            /* margin: 25px auto; */
            margin: 25px;
            margin-top: 120px;
        }
Damit das Ganze schön zentriert ist, habe ich die Größe der Bilder variable gemacht.
Was ich geändert habe, habe ich mit einem Pfeil markiert: /* ---> */