Why doesn't the image size reduce when the screen width is below 300px?

Question

I have this web page that looks okay on the desktop but does not adjust properly to smaller devices like mobile phones. I even tried using "clamp" for the width property in CSS but to no avail. It still overflows to the right of the screen and the elements do not stay centered like they are supposed to.

Below is the code:

:root {
  --main-color: #087830;
  --secondary-color: #e7ffdb;
  --dark-color: #444;
  --light-color: #fafafa
}

body {
  font-family: Quicksand, sans-serif;
  background: radial-gradient(var(--light-color), var(--light-color), var(--secondary-color));
  background-repeat: no-repeat;
  color: var(--dark-color);
  text-shadow: 0 0 2px var(--light-color);
  margin: 0;
  padding: 0 1em;
  display: grid;
  place-items: center;
  font-size: 20px;
  overflow-x: hidden;
  word-wrap: break-word
}

a {
  text-decoration: none
}

input {
  box-sizing: border-box
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: Eczar, serif;
  font-weight: 700;
  margin: 0
}

h2 {
  color: var(--main-color)
}

section {
  border-bottom: 2px solid #b6fd92;
  width: 100%
}

.full-height {
  min-height: 100vh
}

.image-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  text-shadow: 0 0 20px var(--dark-color)
}

.cta-button {
  background: var(--main-color);
  color: var(--light-color);
  text-shadow: none;
  border: 2px solid var(--main-color);
  border-radius: 2em;
  padding: 10px 1em;
  font-weight: 700
}

.cta-button:hover {
  background: var(--light-color);
  color: var(--main-color);
  transition-duration: .4s
}

.navbar {
  height: 100px;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between
}

.navbar div {
  display: flex;
  align-items: center
}

.nav-title {
  height: 100%;
  gap: 10px
}

.navbar img {
  height: 70%
}

.nav-toggle,
.nav-toggle-label {
  position: fixed;
  right: -100vh;
  top: 0;
  height: 80px;
  width: 110px;
  display: grid;
  grid-auto-flow: column;
  place-items: center;
  opacity: 0;
  color: var(--main-color);
  font-weight: 700
}

.website-title {
  max-width: 200px
}

.nav-toggle {
  z-index: 3
}

.nav-toggle-label {
  z-index: 2
}

.navbar a {
  text-decoration: none;
  color: var(--dark-color);
  margin: 0 5px;
  border-radius: 1em;
  padding: .5em 15px
}

.navbar a:hover {
  background: var(--light-color);
  color: var(--main-color);
  box-shadow: 0 0 5px var(--light-color);
  transition-duration: .4s
}

.hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding: 2em;
  gap: 50px
}

.hero div {
  max-width: 500px
}

.hero h2 {
  font-size: 3em;
  line-height: 1em
}

.hero img {
  width: 100%
}

@media screen and (max-width:1020px) {

  .nav-toggle,
  .nav-toggle-label {
    right: 10px;
    top: 10px
  }

  .nav-toggle-label {
    opacity: 1
  }

  .nav-toggle:checked~.navlinks {
    right: 0;
    transition-duration: .4s
  }

  .nav-toggle:checked~.nav-toggle-label {
    color: var(--light-color);
    text-shadow: none
  }

  .navlinks {
    position: fixed;
    top: 0;
    right: -200px;
    height: 100vh;
    width: 200px;
    background: var(--main-color);
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 1
  }

  .navlinks a {
    color: var(--light-color)
  }
}

<section class="full-height">
  <nav class="navbar">
    <div class="nav-title">
      <img src="logo.svg" alt="Logo">
      <img class="website-title" src="website-title.svg" alt="Website Title">
    </div>
    <input type="checkbox" class="nav-toggle">
    <span class="nav-toggle-label">Menu</span>
    <div class="navlinks">
      <a aria-current="page" class="" href="/">Home</a>
      <a aria-current="page" class="" href="/">Link 2</a>
      <a aria-current="page" class="" href="/">Link 3</a>
      <a aria-current="page" class="" href="/">Link 4</a>
      <a aria-current="page" class="" href="/">Login</a>
    </div>
  </nav>
  <div class="hero">
    <div>
      <h2>Catchy Line</h2>
      <p>Description bla bla bla bla bla bla bla bla bla bla bla</p>
      <br>
      <a aria-current="page" class="cta-button" href="/">CTA Button</a>
    </div>
    <div>
      <img src="https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg" alt="hero">
    </div>
  </div>
</section>

How do I make my code responsive?

The elephant image scales correctly on my end. Only if the viewport gets very narrow, the content (headline, button etc.) causes the parent div "hero" to stay at 263px. If you add word-break: break-all to the body, the image scales down infinitely. But that's probably not something you want to do. — Sev, Nov 26 '21 at 10:18

score 0 · Answer 1 · answered Nov 26 '21 at 09:59

to make your images "responsive" (meaning they will not overflow out of your screen/body), try to add something like a max-width: 95% on your image class.

You could also set the background-url of a div and manipulate your div to not be larger than the screen.

score 0 · Answer 2 · answered Nov 26 '21 at 11:31

0

As mentioned by Sev, it's the width of the other content that prevents the image from scaling smaller. I wouldn't bother adjusting it for that, I don't think anyone these days uses a phone that's less than 300px wide.

answered Nov 26 '21 at 11:31

Joe

1
1

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Nov 26 '21 at 12:12

Why doesn't the image size reduce when the screen width is below 300px?

2 Answers2