CODEWITHSUNDEEP
htmlcss
Greg
Greg

Reputation: 256

How to resize a div with screen size change?

I'm trying to implement a responsive layout which includes main content and sidebar.
Sidebar should be in the right side of the main content, and once screen size changes till 600px, it goes to the bottom of main content.
The problem is that when screen width > 600px, sidebar div doesn't resize/reduce and doesn't adjust/fit with the browser. See the screenshot below.

image

Can't figure out how to make it resizable. Here is the code.

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

body {
  font-family: "Poppins", sans-serif;
  min-height: 100vh;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

.sidebar-section {
  border: 1px solid #ccc;
  width: 300px;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  margin-top: 30px;
}

.sidebar button {
  display: flex;
  gap: 5px;
  height: 20px;
  padding: 20px;
  border-radius: 5px;
  cursor: pointer;
  border-color: #ccc;
  align-items: center;
}

.content {
  border: 1px solid #ccc;
}

.articleSection {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.articleSection img {
  max-width: 100%;
  height: auto;
  width: 100%;
  padding: 10%;
}

@media screen and (min-width: 600px) {
  @supports (display: grid) {
    .site {
      display: grid;
      grid-template-columns: 1fr repeat(6, minmax(auto, 10em)) 1fr;
      grid-template-rows: minmax(1em, auto) 1fr auto minmax(1em, auto);
      gap: 20px;
    }
    .content {
      grid-column: 2/7;
    }
    .sidebar {
      grid-column: 7/8;
    }
  }
}
<html lang="en">

<head>
  <link href="style.css" rel="stylesheet" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
</head>

<body>
  <div id="wrapper">
    <section class="site">
      <main class="content">
        <section class="articleSection">
          <img src="https://via.placeholder.com/300x150" alt="prod" />
          <article>
            <p class="description">
              Lorem ipsum dolor sit amet consectetur adipisicing elit.
            </p>
          </article>
        </section>
      </main>
      <aside class="sidebar">
        <div class="sidebar-section">
          <button>
              <i class="fa fa-envelope" aria-hidden="true"></i>
              Write message
            </button>
        </div>
      </aside>
    </section>
  </div>
</body>

</html>

Any help will be appreciated

Upvotes: 0

Views: 1124

Answers (1)

joohong89
joohong89

Reputation: 1272

The .sidebar-section had been given a fixed width of 300px. Therefore the sidebar will exceed the grid column assigned to it. Try removing it, which will result it being assign a value of auto by default and fits the column nicely.

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

body {
  font-family: "Poppins", sans-serif;
  min-height: 100vh;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

.sidebar-section {
  border: 1px solid #ccc;
  /* width: 300px; */
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  margin-top: 30px;
}

.sidebar button {
  display: flex;
  gap: 5px;
  height: 20px;
  padding: 20px;
  border-radius: 5px;
  cursor: pointer;
  border-color: #ccc;
  align-items: center;
}

.content {
  border: 1px solid #ccc;
}

.articleSection {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.articleSection img {
  max-width: 100%;
  height: auto;
  width: 100%;
  padding: 10%;
}

@media screen and (min-width: 600px) {
  @supports (display: grid) {
    .site {
      display: grid;
      grid-template-columns: 1fr repeat(6, minmax(auto, 10em)) 1fr;
      grid-template-rows: minmax(1em, auto) 1fr auto minmax(1em, auto);
      gap: 20px;
    }

    .content {
      grid-column: 2/7;
    }

    .sidebar {
      grid-column: 7/8;
    }
  }
}
<html lang="en">
  <head>
    <link href="style.css" rel="stylesheet" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
  </head>

  <body>
    <div id="wrapper">
      <section class="site">
        <main class="content">
          <section class="articleSection">
            <img src="https://via.placeholder.com/300x150" alt="prod" />
            <article>
              <p class="description">
                Lorem ipsum dolor sit amet consectetur adipisicing elit.
              </p>
            </article>
          </section>
        </main>
        <aside class="sidebar">
          <div class="sidebar-section">
            <button>
              <i class="fa fa-envelope" aria-hidden="true"></i>
              Write message
            </button>
          </div>
        </aside>
      </section>
    </div>
  </body>
</html>

Upvotes: 1

Related Questions