Wrapper is not containing its elements |
Wrapper is not containing its elements |
mp3909 |
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. 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"; } } |
Lo-Fi Version | Time is now: 19th April 2024 - 05:34 PM |