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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

How do I make my code responsive?

CodePudding user response：

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.

CodePudding user response：

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.