Saya relatif baru dalam hal ini, jadi seseorang membantu saya memahami bagaimana saya bisa membuat konten halaman saya meregang untuk mengisi semua ruang dan tidak hanya menyelaraskan di tengah? Saya ingin membuatnya menjadi layar penuh. Di bagian mana dari kode saya yang perlu diubah?

@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');
body {
    font-family: 'Roboto Condensed', sans-serif;
    margin: 0;
    background: rgb(255, 255, 255);
    height: auto;
}

html {
    scroll-behavior: smooth;
}

h1 {
    font-weight: 400;
    font-size: 2.5rem;
    text-transform: uppercase;
    margin: 0;
}

h2 {
    font-weight: 400;
    font-size: 1.2rem;
    text-transform: capitalize;
    margin: 0;
}

img {
    display: block;
    width: 100%;
}

main {
    max-width: 900px;
    margin: auto;
    box-shadow: 30px 0px 40px rgba(0, 0, 0, 0.1), -30px 0px 40px rgba(0, 0, 0, 0.1);
}

#landing {
    background: #fff;
}

#landing-text {
    display: flex;
    flex: 0 1 40vw;
    height: 50vh;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-right: 1rem;
    padding-left: 1rem;
}

#landing-text h2 {
    color: #888;
}

#landing-image {
    background: url(https://source.unsplash.com/dS-q7-zkD9c);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 50vh;
    flex: 0 1 60vw;
    margin: 0;
}

.btn {
    padding: 0.5rem 2rem;
    border: 1px #ccc solid;
    display: inline-block;
    margin: 2rem 0 0;
    border-radius: 50px;
    text-decoration: none;
    color: #333;
    transition: background 500ms ease;
}

.btn:hover {
    background: #000000;
    color: #fff;
    transform: scale(1.11);
    transition: all 0.6s;
}

#header {
    padding: 1.5rem;
    text-align: center;
    background: #333;
    color: #fff;
}

#header h2 {
    border-left: dotted 1px #fff;
    border-right: dotted 1px #fff;
    display: inline-block;
    padding-right: 1rem;
    padding-left: 1rem;
}

.caption {
    padding: 0.8rem;
    text-align: center;
}

footer {
    text-align: center;
    padding: 2rem 1rem;
    margin: auto;
    color: #333;
}

footer h3 {
    font-size: 3rem;
    margin-bottom: 0;
}

.social-part .fa {
    padding-right: 20px;
}

ul li a {
    margin-right: 20px;
}


/* Screen Sizes 500px and Up */

@media (min-width: 500px) {
    #landing {
        display: flex;
        height: 100%;
    }
    #landing-text {
        height: 100vh;
    }
    #landing-image {
        height: 100vh;
    }
}


/* Screen Sizes 700px and Up */

@media (min-width: 700px) {
    .btn {
        padding: 1rem 3rem;
    }
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="styles.css">
    <title>Acme Photography</title>
</head>

<body>
    <main>
        <!-- Landing Area -->
        <div id="landing">
            <div id="landing-text">
                <div id="landing-text-inner">
                    <h1>Acme Photography</h1>
                    <h2>Beautiful Natural Photography</h2>
                    <a href="#images" class="btn" id="view-work">
                        View Work
                    </a>
                </div>
            </div>
            <div id="landing-image"></div>
        </div>

        <div id="images">
            <div id="header">
                <h2>Our Work</h2>
            </div>

            <img src="https://source.unsplash.com/1600x900/?nature,water" alt="">
            <div class="caption">
                <h3>Photo One</h3>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo, tenetur.</p>
            </div>
            <img src="https://source.unsplash.com/1600x900/?nature,trees" alt="">
            <div class="caption">
                <h3>Photo Two</h3>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo, tenetur.</p>
            </div>
            <img src="https://source.unsplash.com/1600x900/?nature,flowers" alt="">
            <div class="caption">
                <h3>Photo Three</h3>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo, tenetur.</p>
            </div>
            <img src="https://source.unsplash.com/1600x900/?nature,animals" alt="">
            <div class="caption">
                <h3>Photo Four</h3>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo, tenetur.</p>
            </div>
            <img src="https://source.unsplash.com/1600x900/?nature,clouds" alt="">
            <div class="caption">
                <h3>Photo Five</h3>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo, tenetur.</p>
            </div>
        </div>
    </main>

    <footer>
        <h3>Get In Touch</h3>
        <p>Email or call us to set up a consult</p>
        <p>Email:
            <strong>contact@acmephotos.test</strong>
        </p>
        <p>Phone:
            <strong>(617) 555-5555</strong>
        </p>
    </footer>
    <script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <script src="main.js"></script>

</body>

</html>
1
user15932403 27 Mei 2021, 08:05

3 jawaban

Jawaban Terbaik

Hapus max-with pada main

main {
    /*max-width: 900px;*/
    margin: auto;
    box-shadow: 30px 0px 40px rgba(0, 0, 0, 0.1), -30px 0px 40px rgba(0, 0, 0, 0.1);
}
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');
body {
    font-family: 'Roboto Condensed', sans-serif;
    margin: 0;
    background: rgb(255, 255, 255);
    height: auto;
}

html {
    scroll-behavior: smooth;
}

h1 {
    font-weight: 400;
    font-size: 2.5rem;
    text-transform: uppercase;
    margin: 0;
}

h2 {
    font-weight: 400;
    font-size: 1.2rem;
    text-transform: capitalize;
    margin: 0;
}

img {
    display: block;
    width: 100%;
}

main {
    /*max-width: 900px;*/
    margin: auto;
    box-shadow: 30px 0px 40px rgba(0, 0, 0, 0.1), -30px 0px 40px rgba(0, 0, 0, 0.1);
}

#landing {
    background: #fff;
}

#landing-text {
    display: flex;
    flex: 0 1 40vw;
    height: 50vh;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-right: 1rem;
    padding-left: 1rem;
}

#landing-text h2 {
    color: #888;
}

#landing-image {
    background: url(https://source.unsplash.com/dS-q7-zkD9c);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 50vh;
    flex: 0 1 60vw;
    margin: 0;
}

.btn {
    padding: 0.5rem 2rem;
    border: 1px #ccc solid;
    display: inline-block;
    margin: 2rem 0 0;
    border-radius: 50px;
    text-decoration: none;
    color: #333;
    transition: background 500ms ease;
}

.btn:hover {
    background: #000000;
    color: #fff;
    transform: scale(1.11);
    transition: all 0.6s;
}

#header {
    padding: 1.5rem;
    text-align: center;
    background: #333;
    color: #fff;
}

#header h2 {
    border-left: dotted 1px #fff;
    border-right: dotted 1px #fff;
    display: inline-block;
    padding-right: 1rem;
    padding-left: 1rem;
}

.caption {
    padding: 0.8rem;
    text-align: center;
}

footer {
    text-align: center;
    padding: 2rem 1rem;
    margin: auto;
    color: #333;
}

footer h3 {
    font-size: 3rem;
    margin-bottom: 0;
}

.social-part .fa {
    padding-right: 20px;
}

ul li a {
    margin-right: 20px;
}


/* Screen Sizes 500px and Up */

@media (min-width: 500px) {
    #landing {
        display: flex;
        height: 100%;
    }
    #landing-text {
        height: 100vh;
    }
    #landing-image {
        height: 100vh;
    }
}


/* Screen Sizes 700px and Up */

@media (min-width: 700px) {
    .btn {
        padding: 1rem 3rem;
    }
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="styles.css">
    <title>Acme Photography</title>
</head>

<body>
    <main>
        <!-- Landing Area -->
        <div id="landing">
            <div id="landing-text">
                <div id="landing-text-inner">
                    <h1>Acme Photography</h1>
                    <h2>Beautiful Natural Photography</h2>
                    <a href="#images" class="btn" id="view-work">
                        View Work
                    </a>
                </div>
            </div>
            <div id="landing-image"></div>
        </div>

        <div id="images">
            <div id="header">
                <h2>Our Work</h2>
            </div>

            <img src="https://source.unsplash.com/1600x900/?nature,water" alt="">
            <div class="caption">
                <h3>Photo One</h3>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo, tenetur.</p>
            </div>
            <img src="https://source.unsplash.com/1600x900/?nature,trees" alt="">
            <div class="caption">
                <h3>Photo Two</h3>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo, tenetur.</p>
            </div>
            <img src="https://source.unsplash.com/1600x900/?nature,flowers" alt="">
            <div class="caption">
                <h3>Photo Three</h3>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo, tenetur.</p>
            </div>
            <img src="https://source.unsplash.com/1600x900/?nature,animals" alt="">
            <div class="caption">
                <h3>Photo Four</h3>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo, tenetur.</p>
            </div>
            <img src="https://source.unsplash.com/1600x900/?nature,clouds" alt="">
            <div class="caption">
                <h3>Photo Five</h3>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo, tenetur.</p>
            </div>
        </div>
    </main>

    <footer>
        <h3>Get In Touch</h3>
        <p>Email or call us to set up a consult</p>
        <p>Email:
            <strong>contact@acmephotos.test</strong>
        </p>
        <p>Phone:
            <strong>(617) 555-5555</strong>
        </p>
    </footer>
    <script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <script src="main.js"></script>

</body>

</html>
0
Lalji Tadhani 27 Mei 2021, 05:29

Anda dapat mencoba width: 100%; di CSS Anda jika Anda ingin meregangkan konten dari tepi kiri ke tepi kanan halaman web Anda. Seperti yang dikatakan oleh Lalji Tadhani di atas, hapus max-width di css tag html main karena hanya akan membiarkannya bertahan hingga 900px dan tidak akan membiarkan isinya meregang hingga kedua sisi.

0
Fun X Time 27 Mei 2021, 06:04

Saya sarankan Anda selalu menggunakan kode ini di bagian atas dokumen CSS Anda.

* {
   padding: 0;
   margin: 0;
   box-sizing: border-box;
}

Bintang menunjuk ke semua elemen!

Halaman Anda cukup responsif. Anda dapat menggunakan kerangka kerja seperti Bootstrap. Dan letakkan tulisan dan kotak bersama-sama dan halaman akan diregangkan.

0
Four 27 Mei 2021, 05:14