Question 309075 in Html Question posted in
Some basic documentation can be found here.

Html – Responsive design problem body not taking the whole width

I’m making a website, but when I’m trying to make it responsive, the body does not take the whole width and messes up the whole website. So how can I fix that?

I tried min-width:fit-content but it’s weird, it feels like zooming in and out. I tried margin:0 and padding:0. I tried max-width for images and nothing happened. The main issue, I think, is the body because when I enter the responsive mode in Google, the body does not take the whole width all.

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

body {
  font-family: "Inter", sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

a {
  color: white;
  text-decoration: none;
  transition: color 0.4s ease;
}

.logo {
  margin-right: 1rem;
}

li {
  list-style: none;
  font-weight: bold;
  transition: background-color 0.5s ease;
}

img {
  cursor: pointer;
}

.link-con {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 4rem;
}

.nav1 {
  background-color: #5222bb;
  color: white;
  padding: 15px 300px;
  font-size: 1.3rem;
}

.nav2 {
  background-color: #5b1fde;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  font-size: 1.1rem;
}

.nav2 li {
  padding: 2rem;
  cursor: pointer;
}

.nav2 li:hover {
  background-color: white;
}

.nav2 li:hover a {
  color: black;
}

.search {
  display: flex;
  align-items: center;
}

.main-seaction {
  background-color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 5rem;
  gap: 4rem;
}

.main-image {
  background-image: url(mainpageimages/mainpage1.png);
  background-size: cover;
  width: 1400px;
  height: 430px;
  color: white;
  padding: 4rem 10rem;
}

.main-image p {
  font-size: 1.5rem;
}

.main-image h1 {
  font-size: 4rem;
}

.top-sec {
  display: flex;
  gap: 2rem;
  padding: 0 4rem;
  justify-content: space-between;
}

.top-sec2 {
  display: flex;
  flex-direction: row-reverse;
  gap: 6rem;
  padding: 0 4rem;
  justify-content: space-between;
}

.inside-sec {
  margin: 0 5rem;
  display: flex;
  flex-direction: column;
  text-align: left;
  gap: 2rem;
}

.text-box {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

h2 {
  font-size: 3rem;
}

p {
  font-size: 1.2rem;
  font-weight: 300;
}

.padding {
  padding: 0 4rem;
}

.top-m {
  margin-top: 7rem;
}

.p-space {
  padding: 1rem 5rem;
}

.cards-con {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  gap: 2rem;
}

.card {
  width: 550px;
  height: 400px;
  border-radius: 20px;
  position: relative;
  cursor: pointer;
  transition: all;
  transition-duration: 300ms;
}

.card:hover .card-content {
  background: rgb(91, 31, 222);
  background: linear-gradient( 90deg, rgba(91, 31, 222, 1) 0%, rgba(147, 98, 255, 1) 90%, rgba(147, 98, 255, 1) 100%);
}

.card:hover {
  transform: scale(1.01);
  transform-origin: 40% 20%;
}

.card1 {
  background-image: url(mainpageimages/card1.png);
  background-size: cover;
}

.card2 {
  background-image: url(mainpageimages/card2.png);
  background-size: cover;
}

.card3 {
  background-image: url(mainpageimages/card3.png);
  background-size: cover;
}

.card4 {
  background-image: url(mainpageimages/card4.png);
  background-size: cover;
}

.card-content {
  background-color: #5b1fde;
  z-index: 999;
  color: white;
  padding: 1.5rem 2rem;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
  position: absolute;
  bottom: 0;
  width: 100%;
}

button {
  background-color: white;
  border: 1px solid #5b1fde;
  border-radius: 10px;
  margin: 0 4rem;
  padding: 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1rem;
  cursor: pointer;
}

button:hover {
  background-color: rgb(214, 214, 214);
}

.footer {
  background-color: #2e2e2e;
  color: white;
  width: 100%;
  padding: 7rem 14rem;
}

.grid {
  display: grid;
  grid-template-columns: auto auto auto;
  padding: 2rem 0rem;
  padding-right: 22rem;
  row-gap: 2rem;
  margin-top: 1rem;
  align-items: center;
}

h3 {
  font-size: 2rem;
}

.footer-links {
  font-size: 1.2rem;
}

.flex {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.grid a:hover {
  color: #0eb072;
  text-decoration: underline;
}
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@600&family=Roboto:wght@300;400&display=swap" rel="stylesheet" />

<nav class="nav1">
  <ul class="link-con">
    <li><a href="">student </a></li>
    <li><a href="">Alumni</a></li>
    <li><a href="">Careers</a></li>
    <li><a href="">Contact</a></li>
  </ul>
</nav>
<nav class="nav2">
  <a href="#"><img class="logo" src="mainpageimages/logo.png" alt="" width="40px" height="50px" /></a>
  <li><a href="#">Study</a></li>
  <li><a href="#">Become a Student</a></li>
  <li><a href="#">Research</a></li>
  <li><a href="#">Student Life</a></li>
  <li><a href="#">About Us</a></li>
  <div class="search">
    <img src="mainpageimages/search-normal.png" alt="" width="90px" height="90px" />
    <img src="mainpageimages/world-svgrepo-com 1.png" alt="" width="35px" height="35px" />
  </div>
</nav>

<section class="main-seaction">
  <div class="main-image">
    <p>Home / Student</p>
    <h1>Student</h1>
  </div>

  <section class="inside-sec">
    <div class="top-sec">
      <div class="text-box">
        <h2>
          STUDENT <br /> OMBUDSMAND
        </h2>
        <p>
          The Student Ombudsman has been established to provide support for students to convey their wishes, requests and complaints and find effective solutions to them.
        </p>
      </div>

      <img src="mainpageimages/mainpage2top.png" alt="" width="500" height="350" />
    </div>

    <div class="top-sec2">
      <div class="text-box">
        <h2>
          NEW STUDENTS <br /> WELCOMING AND ORIENTATION
        </h2>
        <p>
          New Student Orientation Program is organized many different activities for all new students to connect to campus and the TRNC with easier adaptation. Program will provide opportunities for you to build connections with current students and staff to learn
          everything you need to know about campus life and the services available to you.
        </p>
      </div>

      <img src="mainpageimages/mainpage3top.png" alt="" width="500" height="400" />
    </div>

    <div class="padding top-m">
      <h2>LAW ON STUDENT AMNESTY</h2>
      <p class="p-space">
        Click here to obtain detailed information about law on Student Amnesty.
      </p>
    </div>

    <div class="cards-con padding">
      <div class="card card1">
        <div class="card-content">
          <p>ACADEMIC CALENDER</p>
        </div>
      </div>
      <div class="card card2">
        <div class="card-content">
          <p>REGISTRER'S OFFICE</p>
        </div>
      </div>
    </div>

    <h2 class="padding top-m">COURSE ADVISORS LIST</h2>
    <button class="button">
          Associate Programs
          <img
            src="mainpageimages/arrow-down.png"
            width="30px"
            height="20px"
            alt=""
          />
        </button>
    <button class="button">
          Bachelor Programs
          <img
            src="mainpageimages/arrow-down.png"
            width="30px"
            height="20px"
            alt=""
          />
        </button>
    <button class="button">
          Master Programs
          <img
            src="mainpageimages/arrow-down.png"
            width="30px"
            height="20px"
            alt=""
          />
        </button>
    <button class="button">
          PhD Programs
          <img
            src="mainpageimages/arrow-down.png"
            width="30px"
            height="20px"
            alt=""
          />
        </button>

    <h2 class="padding">NEW STUDENTS REGISTRATION FLOWCHARTS</h2>
    <button class="button">
          International Students Registration Flowchart
          <img
            src="mainpageimages/arrow-down.png"
            width="30px"
            height="20px"
            alt=""
          />
        </button>
    <h2 class="padding">NEW STUDENTS ONLINE SERVICES USE</h2>
    <button class="button">
          CIU Information Systems Users Guide
          <img
            src="mainpageimages/arrow-down.png"
            width="30px"
            height="20px"
            alt=""
          />
        </button>
    <div class="cards-con top-m">
      <div class="card card3">
        <div class="card-content">
          <p>IMMIGRATION PROCEDURES</p>
        </div>
      </div>
      <div class="card card4">
        <div class="card-content">
          <p>PAYMENTS</p>
        </div>
      </div>
    </div>
  </section>
</section>

<section class="footer top-m">
  <h3>POPULAR LINKS</h3>
  <div class="grid">
    <a href="#" class="footer-links">Become A Student</a>
    <a href="#" class="footer-links">Academic Calendar</a>
    <a href="#" class="footer-links">Campus Map</a>
    <a href="#" class="footer-links">Application Portal</a>
    <a href="#" class="footer-links">folklore&literature journal</a>
    <a href="#" class="footer-links">Privacy</a>
  </div>
  <h3>GET IN TOUCH</h3>

  <div>
    <div class="grid">
      <a href="#" class="footer-links flex">
        <img src="mainpageimages/pointer.png" alt="" width="30px" height="30px" /> Cyprus International University <br /> 99258 Nicosia, North Cyprus</a>
      <a href="#" class="footer-links flex">
        <img src="mainpageimages/message.png" alt="" width="30px" height="30px" /> [email protected]
      </a>
      <a href="#" class="footer-links flex">
        <img src="mainpageimages/icons8-facebook 1.png" alt="" width="40px" height="40px" />
        <img src="mainpageimages/icons8-twitterx 1.png" alt="" width="40px" height="40px" />
      </a>
      <a href="#" class="footer-links flex">
        <img src="mainpageimages/phone.png" alt="" width="30px" height="30px" /> +90 392 671 1111</a>
      <a href="#" class="footer-links flex">
        <img src="mainpageimages/list.png" alt="" width="30px" height="30px" /> Contact
      </a>
      <a href="#" class="footer-links flex"><img src="mainpageimages/icons8-instagram 1.png" alt="" width="40px" height="40px" />
        <img src="mainpageimages/icons8-youtube 1.png" alt="" width="50px" height="50px" />
        <img src="mainpageimages/icons8-linked-in 1.png" alt="" width="40px" height="40px" /></a>
    </div>
  </div>
</section>
Tags:

2

Answers


  1. 0

    height: 100vh or min-height: 100vh

    should get the job done as you’d set the body height the same value as the viewport height

    Login or Signup to reply.
  2. 0

    Apply a CSS background to html and body elements to see the default settings. There’s a margin applied by default. Override w margin:0;.

    html {
  background: orange;
}

body {
  background: plum;
}
    hello world
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search