10 replies

How do I make this design responsive

I want to make my teal designed paged responsive and looking like the "good food" design but I believe I am missing some important piece about the width. I have looked over the markup but I am quite confused about how this is being achieved and why I am having issues with my design.

The teal page must be viewable on ipads, but I am curious as to how the "good food" page was able to have the content not stretch/exceed limits and my page is the current way it is

Here is my html and css.

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="style.css">
    <title>ava</title>
  </head>
  <body>
    <div class="landing-page">
      <div class="left-content">
        <div class="register-button">
          <div class="text-wrapper-2">Register Device</div>
        </div>
      </div>
      <div class="right-content">
        <div class="centered-items">
          <div class="text-wrapper">Smart Room PEC</div>
          <div class="logo">
            <div class="bottom-layer"></div>
            <div class="svg-layer">
              <img src="img/union.svg" alt="SVG Image">
            </div>
            <div class="logo-image">
              <img src="img/logo-64.png" alt="Logo Image">
            </div>
          </div>
          <img class="hello-ava-label" alt="ava label" src="img/heloavalabel.svg">
        </div>
      </div>
      
    </div>
      
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="style.css">
    <title>ava</title>
  </head>
  <body>
    <div class="landing-page">
      <div class="left-content">
        <div class="register-button">
          <div class="text-wrapper-2">Register Device</div>
        </div>
      </div>
      <div class="right-content">
        <div class="centered-items">
          <div class="text-wrapper">Smart Room PEC</div>
          <div class="logo">
            <div class="bottom-layer"></div>
            <div class="svg-layer">
              <img src="img/union.svg" alt="SVG Image">
            </div>
            <div class="logo-image">
              <img src="img/logo-64.png" alt="Logo Image">
            </div>
          </div>
          <img class="hello-ava-label" alt="ava label" src="img/heloavalabel.svg">
        </div>
      </div>
      
    </div>
      
  </body>
</html>

Added css as a file because of size limits

style.css2.1KB

How do I make this design responsive

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="style.css">
    <title>ava</title>
  </head>
  <body>
    <div class="landing-page">
      <div class="left-content">
        <div class="register-button">
          <div class="text-wrapper-2">Register Device</div>
        </div>
      </div>
      <div class="right-content">
        <div class="centered-items">
          <div class="text-wrapper">Smart Room PEC</div>
          <div class="logo">
            <div class="bottom-layer"></div>
            <div class="svg-layer">
              <img src="img/union.svg" alt="SVG Image">
            </div>
            <div class="logo-image">
              <img src="img/logo-64.png" alt="Logo Image">
            </div>
          </div>
          <img class="hello-ava-label" alt="ava label" src="img/heloavalabel.svg">
        </div>
      </div>
      
    </div>
      
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="style.css">
    <title>ava</title>
  </head>
  <body>
    <div class="landing-page">
      <div class="left-content">
        <div class="register-button">
          <div class="text-wrapper-2">Register Device</div>
        </div>
      </div>
      <div class="right-content">
        <div class="centered-items">
          <div class="text-wrapper">Smart Room PEC</div>
          <div class="logo">
            <div class="bottom-layer"></div>
            <div class="svg-layer">
              <img src="img/union.svg" alt="SVG Image">
            </div>
            <div class="logo-image">
              <img src="img/logo-64.png" alt="Logo Image">
            </div>
          </div>
          <img class="hello-ava-label" alt="ava label" src="img/heloavalabel.svg">
        </div>
      </div>
      
    </div>
      
  </body>
</html>

Added css as a file because of size limits

style.css2.1KB

How do I make this design responsive

How do I make this design responsive

Similar Threads

Similar Threads

Similar Threads