Fixed Element Moving When Resizing

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.

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

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

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.

My css code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portfolio</title>
    <link href="style.css" rel="stylesheet">
</head>
<body>
    <header>
        <!--Header-->
        <br>
        <h1>Felix Lambeaux</h1>
        <img src="" alt="">
        <p class="header-style">French and British student/entrepreneur /coding learner</p>
        <br>
    </header>
    <main>
        <!--Starter-->
        <br>
        <h2>
            About Me
        </h2> 
        <p class="about-style">Welcome to my portfolio! I'm a French and British
            student aged 15 with a passion for learning and
            a knack for innovation. As I navigate the exciting
            world of technology, I've delved into coding, discovering 
            its power to shape the future and create endless possibilities. 
            Alongside my academic pursuits, I've embarked on entrepreneurial 
            ventures, harnessing my coding skills to develop solutions and 
            forge business opportunities. Being bilingual has embrace diversity 
            and global perspectives in my journey. Join me as I combine my 
            youthful curiosity, and entrepreneurial spirit to make a mark 
            in the digital landscape.</p>
            <br>
            <!--Main-->
            <hr>
            <br>
            <h2>My Path</h2>
            <br>
            <img src="" alt="">
            <p class="logo-dis">Dropshipping Logos      2023</p>
            <img src="" alt="">
            <p class="bike-dis">Bike Venture          2019-2020</p>
            <img src="" alt="">
            <p class="clothes-dis">Clothes Reselling 2024</p>
            <!--Quote-->
            <hr>
            <br>
            <p class="quote">Every venture is a story waiting to be told.</p>
            <br>
            <hr>
            <!--More About Me -->
            <br>
            <h2>What I am doing</h2>
            <br>
            <h4 class="head-living">Living</h4>
            <p class="living-dis">I am currently living with my mother and 
                at my dad the weekends. I go to school 
                every week apart from the weekend. I go 
                rowing and hit the gym in the week.</p>
            <h4 class="head-time">Free Time</h4>
            <p class="time-dis">I at the moment i am writting this i am 
                learning how to code with css and html.
                In my free time i try and learn how to 
                code.</p>
            <h4 class="head-work">Businesses</h4>
            <p class="work-dis">At a young age i started trying to sell 
                stuff in my house. I then started looking 
                at millionaires and their day in a life was.
                Covid time i had some time to burn and so i
                started repairing bikes with my brothers, 
                making about 450 pounds . I then learnt about
                e-commerce and started building many skills 
                for future business like video target market.</p>
                <br>
                <hr>
                <!--Footer-->
                <br>
                <h2>Get In Touch</h2>
                <img src="" alt="">
                <h4 class="names">Studio</h4>
                <p class="info">8 church street, CB4 1DT, Cambridge, United Kingdom</p>
                <br>
                <h4 class="names">Email</h4>
                <p class="info">felixlg12@outlook.com</p>
                <br>
                <h4 class="names">Phone</h4>
                <p class="info">00447984596357</p>
                <br>
    </main>
</body>
</html>

My css code

body {
    /* Old browsers */
    background: #1E51A8;
    /* Chrome 10-25, Safari 5.1-6 */
    background: -webkit-linear-gradient(-45deg, #35577D, #1E51A8);
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    background: linear-gradient(-45deg, #35577D, #1E51A8);
    margin: 0;
    padding: 0;
    max-width: none;
  }
h1 {
    color: #26C3E6;
    font-size: 4em;
    font-family: Impact, Haettenschweiler, 'Bold', sans-serif;
    text-align:left;
    font-weight: 400;
    margin-left: 400px;
    margin-right: 1400px;
}
.header-style {
    font-family: 'Courier New', Courier, monospace;
    color:#00D9FF;
    font-size: 2em;
    text-align: right;
    margin-right: 200px;
    margin-left: 1300px;
}
.about-style {
    color: #07DAFF;
    font-family: 'Courier New', Courier, monospace;
    font-size: 2em;
    margin-right: 450px;
    margin-left: 900px;
    position: relative;
    bottom: 150px;
}

h2 {
    color:#26C3E6 ;
    font-size: 4em;
    font-family: arial black;
    margin-left: 400px;
    margin-right: 1200px;
}
.quote {
    color: #00D9FF;
    text-align:Center;
    font-family: serif;
    font-size: 3em;
}
.logo-dis {
    color: #07DAFF;
    font-family: 'Courier New', Courier, monospace;
    font-size: 20px;
    margin-left: 500px;
    position: relative;
    top: 100px
}

.bike-dis {
    color: #07DAFF;
    font-family: 'Courier New', Courier, monospace;
    font-size: 20px;
    margin-left: 1160px;
    position: relative;
    bottom: 40px;
}
 
.clothes-dis {
    color: #07DAFF;
    font-family: 'Courier New', Courier, monospace;
    font-size: 20px;
    margin-left: 1800px;
    position: relative;
    bottom: 63px;
}
.names{
    color: #00D9FF;
    font-size: 30px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    margin-left: 100px;
}

.info {
    color: #00D9FF;
    font-size: 30px;
    font-family: 'Courier New', Courier, monospace;
    margin-left: 100px;
    position: relative;
    bottom: 35px;
}

.head-living {
    color: #00D9FF;
    font-size: 2em;
    font-family: sans-serif;
    margin-left: 200px;
    position: relative;
    top: 125px;
}
.head-time {
    color: #00D9FF;
    font-size: 2em;
    font-family: sans-serif;
    margin-left: 900px;
    position: relative;
    bottom: 105px;
}

.head-work {
    color: #00D9FF;
    font-size: 2em;
    font-family: sans-serif;
    margin-left: 1600px;
    position: relative;
    bottom: 315px;

}

.living-dis {
    color: #00D9FF;
    font-family: 'Courier New', Courier, monospace;
    font-size: 25px;
    text-align: left;
    margin-right: 1700px;
    margin-left: 200px;
    position: relative;
    top: 100px;
}

.time-dis {
    color: #00D9FF;
    font-family: 'Courier New', Courier, monospace;
    font-size: 25px;
    text-align: left;
    margin-left: 900px;
    margin-right: 980px;
    position: relative;
    bottom: 135px;
}

.work-dis {
    color: #00D9FF;
    font-family: 'Courier New', Courier, monospace;
    font-size: 25px;
    text-align: left;
    margin-left: 1600px;
    margin-right: 140px;
    position: relative;
    bottom: 340px;
}

What it looks like when i change the size of it.

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.

Thought someone would say that.

It didn’t let me send another one but here you go.

Im not sure if its enough

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.