Responsive Webpage

A project I've been working on most recently has been a responsive web page. The requirements for the web page were to make the page Responsive on desktop tablet and mobile. this project was difficult, to say the least I thought I had a grasp on flex-box and grid. Only after completing my work did I find that the web page did not respond as I thought it would.

The main issue I was having was figuring out how to place which elements in Flex and which elements to place in a grid I first started off placing different elements in Flex and different elements in a grid with unsatisfactory results. Throughout this assignment I was unsure how to size each box. also I had trouble figuring out how to structure The elements So as the screen changed the elements would also adjust to the size.

in the process of trying to figure out what was wrong, I first erased all my CSS And kept my HTML that didn't work I repeated this process three more times attempting to change my direction each time. throughout changing my CSS I would reference The documents and. Think about it I also watched YouTube videos explaining flex and grid.

@media all and (max-width: 768px) {
  .container,
  .footer-contact,
  .office,
  .team-img-box,
  .media {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .logo {
    font-size: small;
  }
  .logo img {
    height: 40px;
    width: 40px;
  }
  .office img {
    width: 350px;
  }
  #menu {
    display: inline-flex;
  }
  header {
    display: flex;
    justify-content: space-between;
    width: 100%;
  }
  .nav-bar {
    display: none;
  }
  .media,
  .footer-contact {
    display: flex;
    justify-content: space-around;
  }
}

what it was supposed to look like

what i kept ending up with

@media all and (min-width: 769px) and (max-width: 1200px) {
  .container,
  .office {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .office-img-1,
  .office-img-2,
  .office-img-3 {
    display: flex;
    flex-direction: row;
    width: 80vw;
    gap: 20px;
  }
  .office img {
    height: 200px;
    width: 200px;
  }
  .nav-bar {
    display: none;
  }
  #menu {
    display: flex;
  }
  .about,
  .team,
  header {
    width: 90vw;
    align-items: center;
  }
  .team-img-box {
    width: 80vw;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    padding: 10px;
    gap: 5px;
  }
}

This video And web docs or what I used to become more familiar with what Flex is how it's used and the styles that go into it But the main thing that helped was being able to talk to the mentors at Devslopes and in a sense them helping me break down my code and what was wrong with it. My solution to this problem was was mostly redoing it and redoing it and redoing it trying to figure out which way work best and what went where and how this div related to that div.

so in conclusion this project my solution to this problem was not a straight path. i spent hours reading over and over how flex and grid were used to make a mobile responsive website and in the end I still needed help best thing I can say is hopefully it’ll make more sense on the next project.