The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Wrapper is not containing its elements
mp3909
post May 3 2020, 04:06 PM
Post #1


Novice
**

Group: Members
Posts: 20
Joined: 4-April 20
Member No.: 27,264
I noticed an issue with a website that I have created.

I have a wrapper class and I have surprisingly noticed that elements inside this wrapper e.g. the nav bar, sections etc. seem to stick out from it on the right hand side when i minimise the viewport. To make this more clear, I have purposely put a green border around my wrapper and also put a red border around my nav bar so that you can see what I mean. Please see the attached image.

Attached Image


I thought everything will be contained in the wrapper, so that when the wrapper shrinks, all of its elements will shrink proportionately.

Here is the html code:

CODE
<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>GridBiz</title>
        <script src="https://kit.fontawesome.com/ebd07eb632.js" crossorigin="anonymous"></script>
        <link rel="stylesheet" type="text/css" href="website2.css">
    </head>
    <body>
        <div class="wrapper">

            <nav class="main-nav">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </nav>

            <section class="top-container">
                <header class="showcase">
                    <h1>Your web presence</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</p>
                    <a href="#" class="btn">Read More</a>
                </header>
                <div class="top-box" "top-box-a">
                    <h4>Membership</h4>
                    <p class="price">$199/mo</p>
                    <a href="#" class="btn">Buy Now</a>
                </div>
                <div class="top-box" "top-box-b">
                    <h4>Pro Membership</h4>
                    <p class="price">$299/mo</p>
                    <a href="#" class="btn">Buy Now</a>
                </div>
            </section>

            <section class="boxes">
                <div class="box">
                    <i class="fas fa-chart-pie fa-4x"></i>
                    <h3>Analytics</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do</p>
                </div>
                <div class="box">
                    <i class="fas fa-globe fa-4x"></i>
                    <h3>Marketing</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do</p>
                </div>
                <div class="box">
                    <i class="fas fa-cog fa-4x"></i>
                    <h3>Development</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do</p>
                </div>
                <div class="box">
                    <i class="fas fa-users fa-4x"></i>
                    <h3>Support</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do</p>
                </div>
            </section>

            <div class="info">
                <img src="images\black-and-white-blackboard-business-chalkboard-356043.jpg" alt="">
                <div>
                    <h2>Your Business On The Web</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi</p>
                    <a href="#" class="btn">Learn More</a>
                </div>
            </div>

            <section class="portfolio">
                <img src="https://source.unsplash.com/random/200x200" alt="">
                <img src="https://source.unsplash.com/random/201x200" alt="">
                <img src="https://source.unsplash.com/random/202x200" alt="">
                <img src="https://source.unsplash.com/random/203x200" alt="">
                <img src="https://source.unsplash.com/random/204x200" alt="">
                <img src="https://source.unsplash.com/random/205x200" alt="">
                <img src="https://source.unsplash.com/random/206x200" alt="">
                <img src="https://source.unsplash.com/random/207x200" alt="">
                <img src="https://source.unsplash.com/random/208x200" alt="">
            </section>

            <footer>
                <p>GridBiz © 2020</p>
            </footer>

        </div>
    </body>
</html>



And this is the CSS code:

CODE
*CSS Variables*/
:root {
     --primary: #ddd;
     --dark: #333;
     --light: #fff;
     --shadow: 0 1px 5px rgba(104,104,104,0.8);
}

html {
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
    background-color: var(--dark);
}

body {
    background-color: #ccc;
    margin: 30px 50px;
    line-height: 1.4;
}

.btn {
    background-color: var(--dark);
    color: var(--light);
    padding: 0.6rem 1.3rem;
    text-decoration: none;
    border: 0;
}

img {
    max-width: 100%;
}

.wrapper {
    display: grid;
    grid-gap: 20px;
    max-width: 100%;
    border: 5px solid green;
}

.main-nav {
    border: 2px solid crimson;
    width: 100%;
}

.main-nav ul {
    padding: 0;
    list-style: none;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(4, 1fr);
    width: 100%;
}

.main-nav a {
    background-color: var(--primary);
    display: block;
    text-decoration: none;
    padding: 0.8rem;
    text-align: center;
    font-size: 1.2rem;
    color: var(--dark);
    text-transform: uppercase;
    box-shadow: var(--shadow);
}

.main-nav a:hover {
    background-color: var(--dark);
    color: var(--light);
}

.top-container {
    display: grid;
    grid-gap: 20px;
    grid-template-areas:
    "showcase top-box-a"
    "showcase top-box-b";
}

.showcase {
    grid-area: showcase;
    min-height: 400px;
    background-image: url(images/iphone-dark-notebook-pen-34140.jpg);
    background-size: cover;
    background-position: center;
    padding: 3rem;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    box-shadow: var(--shadow);
}

.showcase h1 {
    font-size: 4rem;
    margin-bottom: 0;
    color: var(--light);
}

.showcase p {
    font-size: 1.3rem;
    color: var(--light);
    margin-top: 0;
}

.top-box {
    background: var(--primary);
    text-align: center;
    box-shadow: var(--shadow);
    padding: 1.5rem;
}

.top-box p {
    margin: 1.25rem;
}

.top-box .price {
    font-size: 2.5rem;
}

.top-box-a {
    grid-area: top-box-a;
}

.top-box-b {
    grid-area: top-box-b;
}

.boxes {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.box {
    background-color: var(--primary);
    text-align: center;
    padding: 1.5rem 2rem;
    box-shadow: var(--shadow);
}

.info .btn {
    display: inline-block;
}

.info {
    background: var(--primary);
    box-shadow: var(--shadow);
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-column-gap: 1.875rem;
    padding: 3rem;
}

.portfolio {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))
}

.portfolio img {
    width: 100%;
    box-shadow: var(--shadow);
}

footer {
    margin-top: 2rem;
    background: var(--dark);
    color: var(--light);
    text-align: center;
    padding: 1rem;
}

/* Media Queries */
@media (max-width: 700px) {
    .top-container {
        grid-template-areas:
        "showcase"
        "top-box-a"
        "top-box-b";
    }

    .showcase h1 {
        font-size: 2.5rem;
    }

    .main-nav ul {
        grid-template-columns: 1fr;
    }

    .info {
        grid-template-columns: 1fr;
    }

    .info .btn {
        display: block;
        text-align: center;
    }
}

@media (max-width:500px) {
    .top-container {
        grid-template-areas:
        "showcase"
        "top-box-a"
        "top-box-b";
    }
}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Cascading Style Sheets · Next Newest »
 

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 18th April 2024 - 01:37 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC