Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Follow
Facebook Twitter Instagram Youtube
Contact

Overflowing text even though I assign width to <div>

byMR
January 14, 2022

In the example code – I have given box 3 and box 4 widths of 200px I don’t actually care for using these widths, but I have given them colours so you can see my problem better visually.

The problem is my text is not being contained by the parent <div> with a set (hardcoded) pixel width in box 3 especially it runs waaay out to the right in 1 line instead of wrapping inside the <div>. For box 4, I can understand it’s trying to stretch to the end, but if it were any longer it would again just run outside of the grid anyways. So theres something I’m missing to help wrap content. How do I solve this problem?

* {
  margin:0;
  padding:0;
}
html {
  box-sizing: border-box;
  font-size: 30px;
  font-family: 'Bitter', serif;
}
body{
  background: rgb(7, 7, 7);
  color: #fff;
}
.imgContainer{
  width: 100%;
  height: fit-content;
  background-color: black;
  pointer-events: none;
  user-select: none;
}
.mySlides {
  opacity: 0.5;
  overflow: hidden;
  background-position: center;
  width: 100%;
  height: 650px;
  max-height: 75vh;
  pointer-events: none;
  user-select: none;
}
.bodyC {
  padding-top: 75px;
  max-width: 360px;
  font-weight: 200;
  font-size: 0.8rem;
}
.bodyC2 {
  padding-left: 180px;
  padding-top: 250px;  
  max-width: 450px;
  font-weight: 200;
  font-size: 0.8rem;
}
.bodyContainer {
  display: flex;
  width: 100%;  
  padding-right: 80px;
  padding-bottom: 80px;
  justify-content: center;
  min-height: 50vh; 
}
h3 {
  font-size: 36px;
  margin-bottom:10px;
  font-weight: 700;
}
h4 {
  text-transform: uppercase;
  font-weight: 700;
  font-size: 27px;
  margin-bottom:10px;
}
.logobutton {
  padding-right: 45px;
  user-select: none;
}
.homenugget{
  height:70px;
  width:50px;
  position:fixed;
  top: 5px;
  left: 32px;
  opacity:0;
  user-select: none;
}
.smallu {
  height: 50px;
  width:50px;
  user-select: none;
}
.container {
  margin: 0 auto;
  display:flex;
  align-items: center;
  justify-content: space-between;
}
nav {
  position:relative;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99;
  background-color: #212121;
  padding: 16px 32px;
  border-bottom: 3px solid rgb(37, 164, 173);
}
h1 {
  color: #ffffff ;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.hamburger {
  display: block;
  position: relative;
  z-index: 1;
  user-select: none;
  appearance: none;
  border: none;
  outline: none;
  background: none;
  cursor: pointer;
}
.hamburger span {
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  background-color: #eeeeee;
  border-radius: 6px;
  z-index: 1;
  transform-origin: 0 0;
  transition: 0.4s;
}
.hamburger:hover span:nth-child(2) {
  transform: translateX(10px);
  background-color: rgb(37, 164, 173);
}
.hamburger.is-active span:nth-child(1) {
  transform: translate(0px, -2px) rotate(45deg);
  background-color: rgb(37, 164, 173);
}
.hamburger.is-active span:nth-child(2) {
  opacity: 0;
  transform: translateX(15px);
}
.hamburger.is-active span:nth-child(3) {
  transform: translate(-3px, 3px) rotate(-45deg);
  background-color:rgb(37, 164, 173);
}
.hamburger.is-active:hover span {
  background-color: rgb(75, 243, 255);
  filter: blur(0.5px);
  box-shadow: 1px -1px rgb(75, 243, 255);
}
.menu {
  display:none;
  flex: 1 1 0%;
  justify-content: center;
  margin: 0 -16;
  letter-spacing: 2px;
}
.menu a{ 
  color: ivory;
  margin: 0 16;
  font-weight: 700;
  text-decoration: none;
  transition: 0.4s;
  padding: 5px 16px;
  border-radius: 50px;
}
.menu a.is-active, .menu a:hover{
  background-color: rgba(88, 223, 233, 0.295);
  color: rgb(75, 243, 255);
}
.dropdown {
  position: relative;
}
.dropdownMenu {
  position: absolute;
  width: 300px;
  z-index: 100;
  right: -60px;
  top: calc(100% + 32px);
  border-top: 1px solid rgb(75, 243, 255);
  border-bottom: 3px solid rgb(75, 243, 255);
  border-left: 3px solid rgb(55, 225, 240);
  background-color: #212121;
  border-radius: 0 0 15px 15px;
  opacity: 0;
}
.link{
  display: block;
  text-align: left;
  margin: 10px;
  font-size: 30px;
  color: ivory;
  text-decoration: none; 
  opacity: 1;
}
.dropdownMenu a:hover {
  background-color: rgba(88, 223, 233, 0.295);
  border-radius: 5px;
  color: rgb(75, 243, 255);
  text-decoration: none;   
  opacity: 1;
}
.wth{
  padding-bottom: 1000px;
}
.footer {
  position: relative;
  width: 100%;
  bottom: 0 ;
  text-align: left;
  background-color: #212121;
  padding:50px 0 50px 0;
}

.footer-container {
  margin-left: 1em;
}
.footer h5 {
  color: #fff;
}
.footer h5 {
  margin-bottom: 20px;
}
.footer p {
  color: rgba(255, 255, 255, 0.25);
  font-size:16px;
  line-height:22px;
}
.hearted {
  color:red;
  font-size: 12px;
}
.opacityStyle{
  opacity: 1;
}
.subscribe {
  width: 100%;
  background-color: rgb(92, 89, 89);
  background-image: url('../images/backgrounds/parallax-bg.jpg');
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: 50% 0;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  position: relative;
}
.subscribe >.sub-container {
  padding-top: 80px;
  padding-bottom: 80px;
}
.subscribe-title h2 {
  font-weight: 600;
  font-size: 23px;
  color: #fff;
  letter-spacing:3px;
  margin:0 3%;
  line-height:70px;
  text-transform:uppercase;
}
.subscribe-form {
  margin-top: 6px;
}
.subscribe-form input[type=text] {
  width: 65%;
  height: 60px;
  display: block;
  padding: 0 20px;
  background-color: #fff;
  border: 1px solid #fff;
  border-radius: 10px;
  -webkit-border-top-left-radius: 10px;
  -webkit-border-bottom-left-radius: 10px;
  -moz-border-radius-topleft: 10px;
  -moz-border-radius-bottomleft: 10px;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  line-height: 60px;
  letter-spacing:1px;
  font-size:15px;
  font-weight:300;
  float: left;
}
.subscribe-form input:focus {
  outline: 0;
}
.subscribe-form input[type=submit] {
  width: 35%;
  height: 62px;
  display: flex;
  position: absolute;
  right: 5px;
  justify-content: center;
  background-color: rgb(35, 142, 151);
  border: 1px solid rgb(35, 142, 151);
  color: #fff;
  -webkit-border-top-right-radius: 10px;
  -webkit-border-bottom-right-radius: 10px;
  -moz-border-radius-topright: 10px;
  -moz-border-radius-bottomright: 10px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  font-weight: 700;
  font-size: 33px;
  transition: all 0.125s ease-in-out 0s;
  -moz-transition: all 0.125s ease-in-out 0s;
  -webkit-transition: all 0.125s ease-in-out 0s;
  -o-transition: all 0.125s ease-in-out 0s;
  -ms-transition: all 0.125s ease-in-out 0s;
}
.subscribe-form input[type=submit]:hover {
  background-color: rgb(23, 90, 95);
  border: 1px solid rgb(23, 90, 95);
  color:rgb(75, 243, 255);
}
.error_message {
  color:#fc6e51;
  padding-bottom:15px;
  font-size:13px;
  line-height:30px;
}
#success_page {
  color:#9ce726;
  padding-bottom:10px;
  font-size:12px;
}
#success_page h3 {
  font-size:17px;
  font-weight:400px;
  color:#4ab217;
}
#success_page p {
  font-size:12px;
  font-weight:400px;
  color:#b3b3b3;
}
.box1 {
  grid-column: 1/4;
  text-align: center;
  background: chartreuse;
}
.box2 {
  grid-column: 1 / 2;
  grid-row: 2/2;
  width:300px;
  height: 300px;
  background:blueviolet
}
.box3 {
  width: 200px;
  grid-column: 2/3 ;
  grid-row:2/3;
  background: blue;
}
.box4 {
  width: 200px;
  grid-column: 1/4;
  grid-row:4/4;
  background: #fc6e51;
}
.wrapper{
  display: grid;
  grid-template-columns: repeat(3, auto);
  grid-template-rows: repeat(1, 1fr);
  gap:10px;
  max-height: 55vh;
  background: #212121;
}
.megawrap{
  display: grid;
  grid-auto-flow: column;
  height: 350px;
  width: 200px;
  gap: 20px;
}
@media (min-width: 1080px){
  .bodyC2{
    max-width: 360px;
    padding-left: 150px;
  }
  .bodyC2{
    flex-direction: column;
    padding-top: 200px;
    padding:50px;
    padding-left: 200px;
    margin-left: 100px;
  }   
  .bodyC {
    padding:50px;
    margin-left: 25px;
  }
}
@media (max-width: 1175px){
  .bodyC2{
    max-width: 360px;
    padding-left: 75px;
  }
  .bodyC2{
    flex-direction: column;
    padding-top: 200px;
    padding:50px;
    padding-left: 0px;
    margin-left: 50px;
  }   
  .bodyC {
    padding:50px;
    margin-left: 25px;
  }
}
@media (max-width: 1400px){
  .bodyC2{
    max-width: 360px;
    padding-left: 75px;
  }
  .bodyC2{
    flex-direction: column;
    padding-top: 200px;
    padding:50px;
    padding-left: 0px;
    margin-left: 100px;
  }   
  .bodyC {
    padding:50px;
    margin-left: 25px;
  }
}

@media (min-width: 975px) {
  .hamburger{
    display: none;
  }
  .dropdown {
    display: none;
  }
  .menu{
    display:flex;
  }  
  .bodyContainer{
    flex-direction: row;
  }
  .bodyC2{
    flex-direction: column;
    padding-top: 100px;
  }
}
@media (max-width: 975px){
  .bodyContainer{
    flex-direction: column;
  }
  .bodyC2{
    flex-direction: column;
    padding-top: 50px;
    font-size: .8em;
    margin-left: 150px;
  }
  .bodyC {
    font-size: .8em;
    margin-left: 50px;
  }
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>III</title>
    <link rel="stylesheet" href="main.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Dosis:wght@200;300;400;500;600;700;800&family=Roboto+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&family=Rock+3D&display=swap" rel="stylesheet"> 
</head>
<body>
    <nav>
        <div class="container">
            <div class="logobutton">
                <img class="smallu" src="images/ulogo-white.jpg">
                <a class="homenugget" href="home.html"></a>
            </div>
            <h1>Ideas Imprint</h1>
            <div class="menu">
                <a href="events.html">Events</a>
                <a href="about.html" class="is-active">About</a>
                <a href="login.html">Login</a>
                <a href="#">Dashboard</a>
            </div>
            <div class="dropdown">
                <button class="hamburger">
                    <span> </span>
                    <span></span>
                    <span></span>
                </button>
                <div class="dropdownMenu">
                    <a href="events.html" class="link">Events</a>
                    <a href="about.html" class="link">About</a>
                    <a href="#" class="link">Login</a>
                    <a href="#" class="link">Dashboard</a>
                </div>
            </div>
        </div>
    < /nav>

<div class="megawrap">
<div class="wrapper">
    <div class="box1">Hello I'm a Head</div>
    <img class="box2" src="images/7.jpg" alt="">
    <div class= "box3">
        box3box3box3box3box3box3box3box3box3box3box3box3
    </div>
    <div class= "box4">
       box4box4box4box4box4box4box4box4box4box4box4
    </div>
</div>
<div class="wrapper">
    <div class="box1">Hello I'm a Head</div>
    <img class="box2" src="images/7.jpg" alt="">
    <div class= "box3">
        box3box3box3box3box3box3box3box3box3box3box3
    </div>
    <div class= "box4">
        box4box4box4box4box4box4box4box
    </div>
</div>
<div class="wrapper">
    <div class="box1">Hello I'm a Head</div>
    <img class="box2" src="images/7.jpg" alt="">
    <div class= "box3">
        box3box3box3box3box3box3box3box3box3box3box3box3
    </div>
    <div class= "box4">
        box4box4box4box4box4box4box4box4box
    </div>
</div>
</div>
<div class="wth"></div>
    <!-- Footer section -->
    <footer class="footer">
        <div class="footer-container">
            <div class="footer-row">
                <div class="Footer-text-left">
                    <p>Copyright © 2022 Ideas Imprint Inc. All Rights Reserved.</p>
                    <p> Made with <span class="hearted"> ❤</span></p>
                </div>
            </div>
        </div>

        <!-- footer top -->

    </footer>
    <!-- Footer section -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="main.js"></script>
</body>

</html>

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

>Solution :

Make use of word-wrap property. Add word-wrap: break-word; on your .box3 and .box4 classes. More on it here.

* {
  margin: 0;
  padding: 0;
}

html {
  box-sizing: border-box;
  font-size: 30px;
  font-family: 'Bitter', serif;
}

body {
  background: rgb(7, 7, 7);
  color: #fff;
}

.imgContainer {
  width: 100%;
  height: fit-content;
  background-color: black;
  pointer-events: none;
  user-select: none;
}

.mySlides {
  opacity: 0.5;
  overflow: hidden;
  background-position: center;
  width: 100%;
  height: 650px;
  max-height: 75vh;
  pointer-events: none;
  user-select: none;
}

.bodyC {
  padding-top: 75px;
  max-width: 360px;
  font-weight: 200;
  font-size: 0.8rem;
}

.bodyC2 {
  padding-left: 180px;
  padding-top: 250px;
  max-width: 450px;
  font-weight: 200;
  font-size: 0.8rem;
}

.bodyContainer {
  display: flex;
  width: 100%;
  padding-right: 80px;
  padding-bottom: 80px;
  justify-content: center;
  min-height: 50vh;
}

h3 {
  font-size: 36px;
  margin-bottom: 10px;
  font-weight: 700;
}

h4 {
  text-transform: uppercase;
  font-weight: 700;
  font-size: 27px;
  margin-bottom: 10px;
}

.logobutton {
  padding-right: 45px;
  user-select: none;
}

.homenugget {
  height: 70px;
  width: 50px;
  position: fixed;
  top: 5px;
  left: 32px;
  opacity: 0;
  user-select: none;
}

.smallu {
  height: 50px;
  width: 50px;
  user-select: none;
}

.container {
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

nav {
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99;
  background-color: #212121;
  padding: 16px 32px;
  border-bottom: 3px solid rgb(37, 164, 173);
}

h1 {
  color: #ffffff;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.hamburger {
  display: block;
  position: relative;
  z-index: 1;
  user-select: none;
  appearance: none;
  border: none;
  outline: none;
  background: none;
  cursor: pointer;
}

.hamburger span {
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  background-color: #eeeeee;
  border-radius: 6px;
  z-index: 1;
  transform-origin: 0 0;
  transition: 0.4s;
}

.hamburger:hover span:nth-child(2) {
  transform: translateX(10px);
  background-color: rgb(37, 164, 173);
}

.hamburger.is-active span:nth-child(1) {
  transform: translate(0px, -2px) rotate(45deg);
  background-color: rgb(37, 164, 173);
}

.hamburger.is-active span:nth-child(2) {
  opacity: 0;
  transform: translateX(15px);
}

.hamburger.is-active span:nth-child(3) {
  transform: translate(-3px, 3px) rotate(-45deg);
  background-color: rgb(37, 164, 173);
}

.hamburger.is-active:hover span {
  background-color: rgb(75, 243, 255);
  filter: blur(0.5px);
  box-shadow: 1px -1px rgb(75, 243, 255);
}

.menu {
  display: none;
  flex: 1 1 0%;
  justify-content: center;
  margin: 0 -16;
  letter-spacing: 2px;
}

.menu a {
  color: ivory;
  margin: 0 16;
  font-weight: 700;
  text-decoration: none;
  transition: 0.4s;
  padding: 5px 16px;
  border-radius: 50px;
}

.menu a.is-active,
.menu a:hover {
  background-color: rgba(88, 223, 233, 0.295);
  color: rgb(75, 243, 255);
}

.dropdown {
  position: relative;
}

.dropdownMenu {
  position: absolute;
  width: 300px;
  z-index: 100;
  right: -60px;
  top: calc(100% + 32px);
  border-top: 1px solid rgb(75, 243, 255);
  border-bottom: 3px solid rgb(75, 243, 255);
  border-left: 3px solid rgb(55, 225, 240);
  background-color: #212121;
  border-radius: 0 0 15px 15px;
  opacity: 0;
}

.link {
  display: block;
  text-align: left;
  margin: 10px;
  font-size: 30px;
  color: ivory;
  text-decoration: none;
  opacity: 1;
}

.dropdownMenu a:hover {
  background-color: rgba(88, 223, 233, 0.295);
  border-radius: 5px;
  color: rgb(75, 243, 255);
  text-decoration: none;
  opacity: 1;
}

.wth {
  padding-bottom: 1000px;
}

.footer {
  position: relative;
  width: 100%;
  bottom: 0;
  text-align: left;
  background-color: #212121;
  padding: 50px 0 50px 0;
}

.footer-container {
  margin-left: 1em;
}

.footer h5 {
  color: #fff;
}

.footer h5 {
  margin-bottom: 20px;
}

.footer p {
  color: rgba(255, 255, 255, 0.25);
  font-size: 16px;
  line-height: 22px;
}

.hearted {
  color: red;
  font-size: 12px;
}

.opacityStyle {
  opacity: 1;
}

.subscribe {
  width: 100%;
  background-color: rgb(92, 89, 89);
  background-image: url('../images/backgrounds/parallax-bg.jpg');
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: 50% 0;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  position: relative;
}

.subscribe>.sub-container {
  padding-top: 80px;
  padding-bottom: 80px;
}

.subscribe-title h2 {
  font-weight: 600;
  font-size: 23px;
  color: #fff;
  letter-spacing: 3px;
  margin: 0 3%;
  line-height: 70px;
  text-transform: uppercase;
}

.subscribe-form {
  margin-top: 6px;
}

.subscribe-form input[type=text] {
  width: 65%;
  height: 60px;
  display: block;
  padding: 0 20px;
  background-color: #fff;
  border: 1px solid #fff;
  border-radius: 10px;
  -webkit-border-top-left-radius: 10px;
  -webkit-border-bottom-left-radius: 10px;
  -moz-border-radius-topleft: 10px;
  -moz-border-radius-bottomleft: 10px;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  line-height: 60px;
  letter-spacing: 1px;
  font-size: 15px;
  font-weight: 300;
  float: left;
}

.subscribe-form input:focus {
  outline: 0;
}

.subscribe-form input[type=submit] {
  width: 35%;
  height: 62px;
  display: flex;
  position: absolute;
  right: 5px;
  justify-content: center;
  background-color: rgb(35, 142, 151);
  border: 1px solid rgb(35, 142, 151);
  color: #fff;
  -webkit-border-top-right-radius: 10px;
  -webkit-border-bottom-right-radius: 10px;
  -moz-border-radius-topright: 10px;
  -moz-border-radius-bottomright: 10px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  font-weight: 700;
  font-size: 33px;
  transition: all 0.125s ease-in-out 0s;
  -moz-transition: all 0.125s ease-in-out 0s;
  -webkit-transition: all 0.125s ease-in-out 0s;
  -o-transition: all 0.125s ease-in-out 0s;
  -ms-transition: all 0.125s ease-in-out 0s;
}

.subscribe-form input[type=submit]:hover {
  background-color: rgb(23, 90, 95);
  border: 1px solid rgb(23, 90, 95);
  color: rgb(75, 243, 255);
}

.error_message {
  color: #fc6e51;
  padding-bottom: 15px;
  font-size: 13px;
  line-height: 30px;
}

#success_page {
  color: #9ce726;
  padding-bottom: 10px;
  font-size: 12px;
}

#success_page h3 {
  font-size: 17px;
  font-weight: 400px;
  color: #4ab217;
}

#success_page p {
  font-size: 12px;
  font-weight: 400px;
  color: #b3b3b3;
}


/* ------------------------------------------------------------------------------
      THE IMPORTANT PART 
-------------------------------------------------------------------------------*/

.box1 {
  grid-column: 1/4;
  text-align: center;
  background: chartreuse;
}

.box2 {
  grid-column: 1 / 2;
  grid-row: 2/2;
  width: 300px;
  height: 300px;
  background: blueviolet
}

.box3 {
  width: 200px;
  grid-column: 2/3;
  grid-row: 2/3;
  background: blue;
  word-wrap: break-word;
}

.box4 {
  width: 200px;
  grid-column: 1/4;
  grid-row: 4/4;
  background: #fc6e51;
  word-wrap: break-word;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, auto);
  grid-template-rows: repeat(1, 1fr);
  gap: 10px;
  max-height: 55vh;
  background: #212121;
}

.megawrap {
  display: grid;
  grid-auto-flow: column;
  height: 350px;
  width: 200px;
  gap: 20px;
}


/* ------------------------------------------------------------------------------   
    THE IMPORTANT PART END
-------------------------------------------------------------------------------*/

@media (min-width: 1080px) {
  .bodyC2 {
    max-width: 360px;
    padding-left: 150px;
  }
  .bodyC2 {
    flex-direction: column;
    padding-top: 200px;
    padding: 50px;
    padding-left: 200px;
    margin-left: 100px;
  }
  .bodyC {
    padding: 50px;
    margin-left: 25px;
  }
}

@media (max-width: 1175px) {
  .bodyC2 {
    max-width: 360px;
    padding-left: 75px;
  }
  .bodyC2 {
    flex-direction: column;
    padding-top: 200px;
    padding: 50px;
    padding-left: 0px;
    margin-left: 50px;
  }
  .bodyC {
    padding: 50px;
    margin-left: 25px;
  }
}

@media (max-width: 1400px) {
  .bodyC2 {
    max-width: 360px;
    padding-left: 75px;
  }
  .bodyC2 {
    flex-direction: column;
    padding-top: 200px;
    padding: 50px;
    padding-left: 0px;
    margin-left: 100px;
  }
  .bodyC {
    padding: 50px;
    margin-left: 25px;
  }
}

@media (min-width: 975px) {
  .hamburger {
    display: none;
  }
  .dropdown {
    display: none;
  }
  .menu {
    display: flex;
  }
  .bodyContainer {
    flex-direction: row;
  }
  .bodyC2 {
    flex-direction: column;
    padding-top: 100px;
  }
}


/* Once completely tiny shrink text to columns */

@media (max-width: 975px) {
  .bodyContainer {
    flex-direction: column;
  }
  .bodyC2 {
    flex-direction: column;
    padding-top: 50px;
    font-size: .8em;
    margin-left: 150px;
  }
  .bodyC {
    font-size: .8em;
    margin-left: 50px;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>III</title>
  <link rel="stylesheet" href="main.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Dosis:wght@200;300;400;500;600;700;800&family=Roboto+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&family=Rock+3D&display=swap" rel="stylesheet">
</head>

<body>
  <nav>
    <div class="container">
      <div class="logobutton">
        <img class="smallu" src="images/ulogo-white.jpg">
        <a class="homenugget" href="home.html"></a>
      </div>
      <h1>Ideas Imprint</h1>
      <div class="menu">
        <a href="events.html">Events</a>
        <a href="about.html" class="is-active">About</a>
        <a href="login.html">Login</a>
        <a href="#">Dashboard</a>
      </div>
      <div class="dropdown">
        <button class="hamburger">
                    <span> </span>
                    <span></span>
                    <span></span>
                </button>
        <div class="dropdownMenu">
          <a href="events.html" class="link">Events</a>
          <a href="about.html" class="link">About</a>
          <a href="#" class="link">Login</a>
          <a href="#" class="link">Dashboard</a>
        </div>
      </div>
    </div>
    < /nav>

      <div class="megawrap">
        <div class="wrapper">
          <div class="box1">Hello I'm a Head</div>
          <img class="box2" src="images/7.jpg" alt="">
          <div class="box3">
            box3box3box3box3box3box3box3box3box3box3box3box3
          </div>
          <div class="box4">
            box4box4box4box4box4box4box4box4box4box4box4
          </div>
        </div>
        <div class="wrapper">
          <div class="box1">Hello I'm a Head</div>
          <img class="box2" src="images/7.jpg" alt="">
          <div class="box3">
            box3box3box3box3box3box3box3box3box3box3box3
          </div>
          <div class="box4">
            box4box4box4box4box4box4box4box
          </div>
        </div>
        <div class="wrapper">
          <div class="box1">Hello I'm a Head</div>
          <img class="box2" src="images/7.jpg" alt="">
          <div class="box3">
            box3box3box3box3box3box3box3box3box3box3box3box3
          </div>
          <div class="box4">
            box4box4box4box4box4box4box4box4box
          </div>
        </div>
      </div>
      <div class="wth"></div>
      <!-- Footer section -->
      <footer class="footer">
        <div class="footer-container">
          <div class="footer-row">
            <div class="Footer-text-left">
              <p>Copyright © 2022 Ideas Imprint Inc. All Rights Reserved.</p>
              <p> Made with <span class="hearted"> ❤</span></p>
            </div>
          </div>
        </div>

        <!-- footer top -->

      </footer>
      <!-- Footer section -->
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
      <script src="main.js"></script>
</body>

</html>
byMR
Published
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Read more

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading