Fixed Element Moving When Resizing

HTML-CSS
1

Hello,

I am making my first website, but i have come into a problem. When i change the size of my window my layout changes. For example the paragraphs extend into a different shape.

I have ttried to look everywhere over the internet but i am still not able to fix it.

2

Might want to add some details to your post, like the code that’s giving you issues, and a more specific explanation of the problem

3

Can you post a photo of the problem or the code you wrote?

5

It’s kind of hard to help you here as I don’t know what is the page’s design (how the page should look like).

From the first glance, I can tell the paragraph looked small because you set the margin too big:

.living-dis {
    margin-right: 1700px;
    margin-left: 200px;
}

Your page is also not responsive on small screen.

I recommend you to take the FCC’s Responsive Web Design course first before building your first website.

7

Hi, Felix. After looking at your code, I can give you a few tips:

First of all, your HTML is lacking structure:

    <main>
      <h2> About Me </h2>
      <p>Welcome to my portfolio!</p>
      <br>
      <h2>What I am doing</h2>
      <br>
      <h4>Living</h4>
      <p>I am currently living...</p>
      <h4>Free Time</h4>
      <p>I at the moment..</p>
      <h4>Businesses</h4>
      <p>At a young age i started...</p>
    </main>

Try to put related info into a group using <section> or <div> so you can select those groups to apply CSS style to them.

An HTML structure example:

<main>
  <section>
    <h2>Our Products</h2>
    <p>General introduction...</p>

    <div class="products">
      <div class="coffee">
        <h3>Coffee</h3>
        <p>Coffee introduction...</p>
      </div>

      <div class="Desserts">
        <h3>Cupcake</h3>
        <p>Cupcake introduction...</p>
      </div>
    </div>
  </section>
</main>

<footer>
  <h2>Contact</h2>
  <address>address detail</address>
</footer>

Secondly, don’t use <br>just to add space between elements.
Use margin or padding top and bottom CSS rules instead.

Don’t use position: relative and set margin-left, margin-right just to set layout for your page.
For layout, use Flexbox or Grid.

.time-dis {
    margin-left: 900px;
    margin-right: 980px;
}

Set margin too large like this make your paragraphs has a small width, make them look like the first screenshot.

8

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.