How can I prevent content from overlapping when I resize my browser?-CodePudding

I'm learning web development through The Odin Project and I'm currently stuck on the landing page project. I feel like everything looks the way it should from the template I'm using, but I notice there is overlap with the 'Placeholder' image at the top (the pug) and with the 'Sign Up' button at the very bottom. I've done a lot of research and I've tried changing the display settings to 'block', 'inline-block' and flex.

This is also my first project working from scratch, so I know my HTML and CSS is very messy. Please be kind :) I've been working on this for over a week now and I can't figure out what I'm doing wrong! I suspect that it might have something to do with my negative margins, but I'm not sure.

Could someone please tell me what I'm doing wrong and how I can fix it? It would be greatly appreciated!

Here is my HTML and CSS: https://codepen.io/palmercury/pen/eYExONy

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Landing Page</title>
    <link rel="stylesheet" href="stylish.css">

</head>


<body>
  <div id="wrapper">
      <div class="container">
    <div class="header">
        <h3>Header Logo</h3>
    </div>

    <div class="links">
    <ul>
    <li><a href="#">Link One</a></li>
    <li><a href="#">Link Two</a></li>
    <li><a href="#">Link Three</a></li>
    </div>

    <div class="main-content">
     <h1>This website is <br> awesome.</h1>
     <p class="subtext">This website has some subtext that goes here under the <br> main title. It's a smaller font and the color is lower contrast.</p>
    </div>

    <button>Sign-Up</button>
    </div>

    <div class="placeholder">
        <img src="https://c8.alamy.com/comp/2AT0FHN/cute-pug-dog-walking-in-park-2AT0FHN.jpg" width="400" alt="a pug puggin'">
    </div>
    
    <div class="middle-content">
        <p class="random">Some Random Info</p>
    </div>


    <div class="pics">
        <div class="info">
          <img src="images/images.png" alt = "Catfe Lounge">
          <div class="text">This is some subtext under an illustration or image.</div>
        </div>
        <div class="info">
            <img src="images/images.png" alt = "Catfe Lounge">
            <div class="text">This is some subtext under an illustration or image.</div>
        </div>
        <div class="info">
            <img src="images/images.png" alt = "Catfe Lounge">
            <div class="text">This is some subtext under an illustration or image.</div>
        </div>
        <div class="info">
            <img src="images/images.png" alt = "Catfe Lounge">
            <div class="text">This is some subtext under an illustration or image.</div>
        </div>
      </div>

    <div class="quote">
        <h2>This is an inspiring quote, or a testimonial from a customer. Maybe it's just filling up space, or maybe will actually read it. Who knows? All I know is that it looks nice.</h2>
    </div>

    <div class="call-to">
       <h3>Call to Action! It's time!</h3>
        <p class="signup">Sign up for our product by clicking that button right over there!</p>
       <button class="call">Sign Up</button>
    </div>

    <div class="footer">
        Copyright - Palmmercury 2021<BR>
            Photo Credits: <a href="https://www.google.com/url?sa=i&url=https://catfelounge.com/cat-adoption/&psig=AOvVaw2i5EK8KpqPOlzrUQPvhGEf&ust=1636500695396000&source=images&cd=vfe&ved=0CAkQjhxqFwoTCIDmnKr2ifQCFQAAAAAdAAAAABAD">Catfe Lounge</a>
    </div>
</div>

</body>
</html>

CodePudding user response：

Wrap the left text and the image in a single container (wrapper), and apply display:flex;

Remove the margin and the paddings from the placeholder image.

You should do something like:

 <div class="hero">
    <div class="text-button-area">
    Left content goes here
    </div>
    <div class="image-area">
    <img>Image goes here
    </div>
</div>

You can then apply a display:flex to the hero container. Read more about Flexbox here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

CodePudding user response：

One way is to set a min-width value to the body, like so:

body{
    display:flex;
    min-height:100vh;
    
    min-width: 1200px;
}