seo Question posted in
Some basic information to get you started with this can be found here.

Design breaks in every resolution – I think I might be positioning things wrong – SEO

Okay so I’m at the point where I have 500 lines of css and another 1500 for media queries and it’s still not responsive. It breaks on specific resolutions. This is my first website that I’m building by the way.

Am I positioning things wrong using CSS? How can I make it so it won’t break so easily?
I think that I should be using other things instead of position: absolute everytime.

html {
    font-family: 'Proxima Nova';
    font-weight: 200;
    font-size: 10px;
    max-height: 100%;
}

body {
    width: 100%;
    color: #fff;
    background-color: #00000f;
    text-rendering: optimizeLegibility;
    font-family: 'Proxima Nova';
    font-weight: 200;
    font-size: 10px;
    overflow-x: hidden;
}

#use-portrait {
    color: #fff;
    visibility: hidden;
    display: block;
    font-size: 2rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}


#container {
    width: 100%;
    margin: 0 auto;
    text-rendering: optimizeLegibility;
}

/*Header Start*/

header {
    width: 100%;
    font-weight: 400;
    position: absolute;
    top: 0;
}

::selection {
    color: #77dff1;
}

/*Navigation Start*/

#bara-wrap {
    max-width:1000px;
    margin: 0 auto;
}

#bara {
    max-width: 1000px;
    margin: 0 auto;
}
.logo {
    width: 10%;
    float: left;
}

#bara ul {
    display: inline-block;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50.5%;
    transform: translate(-50%, -50%);
}

#bara li{
    display: inline;
    padding: 0 2em;
}

#bara a:hover {
    transition: all 0.5s;
    border-bottom: 1px solid #77dff1;
    color: #77dff1;
}

#bara a {
    color: #eeede7;
    font-weight: 600;
    font-size: 1.8rem;
    text-decoration: none;
}

#social {
    float: right;
    display: inline-block;
}

ul.social {
    text-align: center;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
}

#social li {
    display: inline;
    color: #eeede7;
    margin: 8px;
}

a.xx1 {
    color: #eeede7;
    text-decoration: none;
    font-size: 2.5rem;
}

a.xx1:hover {
        transition: ease 0.4s;
        color: #77dff1;
}

#active {
    color: #77dff1 !important;
    border-bottom: 1px solid #77dff1;
}

/*Continut centru*/

#central {
    margin-top: 11vw;
    font-family: 'Roboto Condensed', sans-serif;
    user-select: none;
    position: relative;
    display: table;
    width: 100%;
}

#intro-wrap {
    display: table-cell;
    vertical-align: middle;
    max-width: 710px;
    width: 100%;
}

#intro {
    text-transform: uppercase;
    color: #77dff1;
    font-size: 30rem;
    text-align: center;
}

.intro {
    font-size: 2.4rem;
    text-align: center;
    margin: 0 auto;
    max-width: 710px;
    line-height: 35px;
    color: #eeede7;
}

/*Buton MORE*/

#button-wrap {
    postion: relative;
    text-align: center;
    margin-top: 2.5vw;
}

#more {
    font-family: 'Proxima Nova';
    font-weight: 600;
    background-color: transparent;
    text-align: center;
    text-decoration: none;
    font-size: 2.5rem;
    color: #fff;
    cursor: pointer;
    border: 2px solid #77dff1;
    padding: 15px;
    margin: 0 auto;
}

#more:hover {
        font-weight: 100;
        color: #00000f;
        background: #77dff1;
}

/*Minge*/

#hr {
    position: absolute;
    bottom: 10%;
    width: 100%;
    margin: 0 auto;
}

hr {
    border-color: #77dff1;
    max-width: 90%;
}

/*ABOUT.html*/

#central-about {
    margin: 0 auto;
    max-width: 1000px;
    margin-top: 15vw;
    display: flex;
    font-family: 'Roboto Condensed', sans-serif;
}

#dreamer {
    margin-left: 4rem;
}

.dumbbell {
    width: 12rem;
    position: relative;
    bottom: 20%;
}

#gym {
    margin-left: 4rem;
}

#football {
    margin-left: 4rem;
}

#health {
    margin-left: 4rem;
}

#code {
    margin-left: 4rem;
}

#tech {
    margin-left: 4rem;
}

#camera {
    margin-left: 4rem;
}

#perfectionist {
    margin-left: 4rem;
}

#hover {
    position: absolute;
    left: 44%;
    top: 42%;
}

.description1,
.description2,
.description3,
.description4,
.description5,
.description6,
.description7,
.description8 {
    color: #77dff1;
    display: none;
    font-size: 3.5rem;
    margin: 0 auto;
    position: absolute;
    top: 70%;
    text-align: center;
    left: 5%;
    max-width: 90%;
    line-height: 3.5rem;
}

.color {
    color: #77dff1;
}

.hov {
    width: 12rem;
    position: relative;
    bottom: 20%;
    display: none;
}

#about {
    font-family: 'Roboto Condensed';
    width: 100%;
    font-weight: bold;
    position: absolute;
    text-align: center;
    top: 20%;
    display: none;
    font-size: 2.4rem;
    color: #77dff1;
}

/*SKILLS.HTML*/

#canvas {
    position: absolute;
    bottom: 62%;
    left: 35%;
    width: 600px;
    height: 250px;
    margin: 0 auto;
}

#central-skills {
    margin: 0 auto;
    max-width: 1300px;
    margin-top: 15vw;
    font-family: 'Roboto Condensed', sans-serif;
    user-select: none;
    font-weight: bold;
    font-size: 2.4rem;
}

.trying {
    text-align: center;
}

#website ul {
    margin-top: 2rem;
    list-style-type: none;
}

#websites li:before {
    content: "2714020";
}

#websites {
    position: absolute;
    top: 50%;
    max-width: 100%;
    font-size: 0 !important;
}

.trying {
    position: absolute;
    top: 20%;
    left: 35%;
}

.websites {
    text-align: center;
    position: absolute;
    left: 35%;
    bottom: 43%;
}

#websites {
    position: absolute;
    top: 55%;
    margin-left: 10rem;
}

#websites ul {
    margin-top: 5rem;
}

#websites li {
    font-size: 2.4rem;
}

.list-adv {
    display: inline-block;
    border: 2px solid #77dff1;
    padding: 6rem;
    margin: 0;
    color: #77dff1;
}

.scratch {
    padding: 6rem 5.5rem 6rem 5.6rem;
}

.mobile-skills {
    visibility: hidden;
}
#icons {
    font-size: 10rem;
    max-width: 1000px;
    margin: 0 auto;
    margin-top: 6vw;
}

.fa-html5 {
    float: left;
}

.fa-js-square {
    position: absolute;
    left: 50%;
    -ms-transform: translate(-50%);
    transform: translate(-50%);
}

.fa-css3-alt {
    float: right;
}

.canvas {
    width: 600px;
}

/*CONTACT.HTML*/

#contact {
    margin: 0 auto;
    margin-top: 11vw;
    max-width: 1040px;
}

#social-contact-wrap {
    max-width: 1000px;
    margin: 0 auto;
}

.contactx {
    font-size: 2.4rem;
    text-align: center;
    margin: 0 auto;
    max-width: 710px;
    line-height: 3.5rem;
    color: #eeede7;
    font-family: 'Roboto Condensed';
}

.communicate {
    font-size: 3.5rem;
    text-align: center;
    margin: 0 auto;
    margin-top: 2vw;
    max-width: 710px;
    line-height: 3.5rem;
    color: #77dff1;
    font-family: 'Roboto Condensed';
}

.social-contact {
    margin: 0 auto;
    width: 1000px;
    position: absolute;
    top: 65%;
    display: inline-block;
}

.social-contact > li {
    display: inline;
    cursor: pointer;
}

.snapchat {
    float: right;
}

.facebook {
    float: left;
}

.email {
    position: relative;
    left: 35%;
}
index.html
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
    <div id="use-portrait">
        <h6>To use this website you must use a portrait orientation!</h6>
        <h6>If you are using a computer and encountering this error, make the window bigger.</h6>
    </div>
<div id="container">
            <header id="header" style="display:none;">
                <div id="bara-wrap">
                    <img src="img/logo.png" alt="LOGO" class="logo" />
                    <nav id="social">
                        <ul class="social">
                            <li class="x1"><a href="" target="_blank" title="Only for contact, message me there!" class="xx1"><i class="fab fa-facebook-f"></i></a></li>
                            <li class="x1 x2 x3"><a href="" title="Contact me via email!" class="xx1 xx2"><i class="far fa-envelope"></i></a></li>
                        </ul>
                    </nav>
                    <nav id="bara">
                        <ul class="butoane">
                            <li class="btn"><a href="index.html" id="active" class="home x1">home</a></li>
                            <li class="btn"><a href="about.html" class="about x1">about</a></li>
                            <li class="btn"><a href="skills.html" class="skills x1">skills</a></li>
                            <li class="btn"><a href="contact.html" class="contact x1">contact</a></li>
                        </ul>
                    </nav>
                </div>
            </header>
            <div id="central">
                <div id="intro-wrap">
                    <h1 id="intro" style="display:none;">hi</h1>
                    <h6 class="intro" style="display:none;">This is a small step to achieve one of my dreams. A small place on the internet where people get to know me. Creative and functional, built with passion and hard work.</h6>
                    <div id="button-wrap">
                        <button type="button" id="more" style="display:none;">Learn more</button>
                    </div>
                </div>
            </div>
            <div id="hr" style="display: none;">
                <hr />
            </div>
</div>   
skills.html
<body>
    <div id="use-portrait">
        <h6>To use this website you must use a portrait orientation!</h6>
        <h6>If you are using a computer and encountering this error, make the window bigger and refresh the page.</h6>
    </div>
    <div id="container">
        <header id="header" style="display: none;">
            <div id="bara-wrap">
                <img src="img/logo.png" alt="LOGO" class="logo" />
                <nav id="social">
                    <ul class="social">
                        <li class="x1"><a href="" target="_blank" title="Only for contact, message me there!" class="xx1"><i class="fab fa-facebook-f"></i></a></li>
                        <li class="x1 x2 x3"><a href="" title="Contact me via email!" class="xx1 xx2"><i class="far fa-envelope"></i></a></li>
                    </ul>
                </nav>
                <nav id="bara">
                    <ul class="butoane">
                        <li class="btn"><a href="index.html" class="home x1">home</a></li>
                        <li class="btn"><a href="about.html"  class="about x1">about</a></li>
                        <li class="btn"><a href="skills.html" id="active" class="skills x1">skills</a></li>
                        <li class="btn"><a href="contact.html" class="contact x1">contact</a></li>
                    </ul>
                </nav>
            </div>
        </header>
        <div id="central-skills">
            <div id="canvas">
                <canvas class="canvas"></canvas>
                <script src="js/canvas.js"></script>
            </div>
            <div id="skills" style="display: none;">
                <h6 class="trying">Currently I consider myself familiar and comfortable with:</h6>
                <h6 class="mobile-skills">html CSS JavaScript jQuery Bootstrap Canvas</h6>
                <div id="icons">
                    <ul>
                        <li id="html"><i class="fab fa-html5"></i></li>
                        <li id="js"><i class="fab fa-js-square"></i></li>
                        <li id="css"><i class="fab fa-css3-alt"></i></li>
                    </ul>
                </div>
                <div id="websites"> 
                    <ul>
                        <li class="list-adv 1">Responsive</li>
                        <li class="list-adv 2">Using a clean and easy to follow code</li>
                        <li class="list-adv 3">Clean and good-looking</li>
                        <li class="list-adv 4">Optimized for Search Engines (SEO)</li>
                        <li class="list-adv scratch">Coded from scratch (unless there is a need of a CMS)</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    contact.html
    <body>
    <div id="use-portrait">
        <h6>To use this website you must use a portrait orientation!</h6>
        <h6>If you are using a computer and encountering this error, make the window bigger.</h6>
    </div>
    <div id="container">
        <header id="header" style="display:none;">
            <div id="bara-wrap">
                <img src="img/logo.png" alt="LOGO" class="logo" />
                <nav id="social">
                    <ul class="social">
                        <li class="x1"><a href="" target="_blank" title="Only for contact, message me there!" class="xx1"><i class="fab fa-facebook-f"></i></a></li>
                        <li class="x1 x2 x3"><a href="" title="Contact me via email!" class="xx1 xx2"><i class="far fa-envelope rg"></i></a></li>
                    </ul>
                </nav>
                <nav id="bara">
                    <ul class="butoane">
                        <li class="btn"><a href="index.html" class="home x1">home</a></li>
                        <li class="btn"><a href="about.html" class="about x1">about</a></li>
                        <li class="btn"><a href="skills.html" class="skills x1">skills</a></li>
                        <li class="btn"><a href="contact.html" id="active" class="contact x1">contact</a></li>
                    </ul>
                </nav>
            </div>
        </header>
        <div id="contact">
            <h6 class="contactx" style="display: none;">Want to contact me?</h6>
            <h6 class="communicate" style="display: none;">I love to talk with people. Don't  be shy, just do it!</h6>
            <div id="social-contact-wrap">
                <ul class="social-contact" style="display: none;">
                    <li class="facebook"><i class="fab fa-facebook fa-10x"></i></li>
                    <li class="email"><i class="far fa-envelope fa-10x"></i></li>
                    <li class="snapchat"><i class="fab fa-snapchat fa-10x"></i></li>
                </ul>
            </div>
        </div>
    </div>
    about.html  
    <div id="use-portrait">
        <h6>To use this website you must use a portrait orientation!</h6>
        <h6>If you are using a computer and encountering this error, make the window bigger.</h6>
    </div>
    <div id="container">
        <header id="header" style="display: none;">
            <div id="bara-wrap">
                <img src="img/logo.png" alt="LOGO" class="logo" />
                <nav id="social">
                    <ul class="social">
                        <li class="x1"><a href="" target="_blank" title="Only for contact, message me there!" class="xx1"><i class="fab fa-facebook-f"></i></a></li>
                        <li class="x1 x2 x3"><a href="" title="Contact me via email!" class="xx1 xx2"><i class="far fa-envelope"></i></a></li>
                    </ul>
                </nav>
                <nav id="bara">
                    <ul class="butoane">
                        <li class="btn"><a href="index.html" class="home x1">home</a></li>
                        <li class="btn"><a href="about.html" id="active" class="about x1">about</a></li>
                        <li class="btn"><a href="skills.html" class="skills x1">skills</a></li>
                        <li class="btn"><a href="contact.html" class="contact x1">contact</a></li>
                    </ul>
                </nav>
            </div>
        </header>
                <h2 id="about">This is the place where you can learn more about me. I've listed the most important things about myself.</h2>
        <div id="central-about" style="display: none;">
            <h6 id="hover" style="font-weight: italic;">(hover on any of the images to learn more)</h6>
                <div id="dreamer">
                    <i class="fa fa-cloud fa-8x" aria-hidden="true"></i>
                    <p class="description1">Definitely a dreamer. I see myself succesful in every situation. I don't fear failing, because I always aim high so I can progress.</p>
                </div>
                <div id="gym">
                    <img src="img/non.png" alt="dumbbell" class="dumbbell" />
                    <img src="img/hov.png" alt="hov" class="hov" />
                    <p class="description2">Addicted to working out. I was skinny my whole life and at some point I've decided to put some muscles. I achieved my dream of having a great physique but I'm still not 100% satisfied so I'm training even harder.</p>
                </div>
                <div id="football">
                    <i class="fab fa-dribbble fa-8x" aria-hidden="true"></i>
                    <p class="description3">I love to play football. I've played it my whole life, and I'm still doing it for a local team. As I'm young, I train hard and I know someday I will achieve what I want.</p>
                </div>
                <div id="health">
                    <i class="far fa-heart fa-8x"></i>
                    <p class="description4">I take a lot of care of my health. Since I've started working out I decided that I have to sleep right, drink enough water and eat a lot of fruits and vegetables, so I will have more energy to code!</p>
                </div>
                <div id="code">
                    <i class="fas fa-code fa-8x"></i>
                    <p class="description5">I love to code. I've started with C++ a long time ago and I'm still studying it at my high school. At some point I met web developing and I instantly fell in love with it.</p>
                </div>
                <div id="tech">
                    <i class="fas fa-desktop fa-8x"></i>
                    <p class="description6">I love technology. Every device, every feature! I love to fix any type of problems about it, and if I can't I always have to find a way to, mostly using Google.</p>
                </div>
                <div id="camera">
                    <i class="fas fa-camera fa-8x"></i>
                    <p class="description7">I enjoy to take photos and show off my results from working out. Yes, I know, pretty arrogant, but it's a nice feeling seeing yourself in great shape!</p>
                </div>
                <div id="perfectionist">
                    <i class="fas fa-check fa-8x"></i>
                    <p class="description8">Perfectionist. Things have to be perfect everytime for me, if they don't the project isn't finished! I always have to be the best, if not it will makes me train/study even more.</p>
                </div>
        </div>
    </div>

I’m close to having a mental breakdown. After 1.5k lines of @media queries (yeah I know that’s bad and after doing them I realised that it’s not okay, I’ve even had to use !important for some lol.) it’s still not responsive. I should’ve used bootstrap. These are the media queries. (I couldn’t post it as a snippet because there is too much code) https://pastebin.com/rN1ty6vm
I’m so mad right now. I feel like the main css is not okay, that’s why it breaks so easily. Can you help me fix it?

Tags:

2

Answers


  1. 0

    Holy cow, that’s a lot of media queries! I’m not going to try to sift through all of them, but my best guess is that you’ve been a too specific with your media queries and probably have left gaps or breaks in them, leading to the responsiveness breaking unexpectedly.

    I usually stick to three or four main breakpoints, maybe adding another five or so for small things that I want to be more precise with.

    My recommendation is that you scrap your current media queries (brutal, I know!) and start again, trying to stick to just a handful of them to start. A general rule of thumb in web dev is that you want to be an unspecific as necessary; that reduces the amount of unexpected bugs you run into. Also, I notice that you’re using any child selectors in your css; they’re great! You should check them out when you get a chance: https://www.w3schools.com/cssref/css_selectors.asp

    Login or Signup to reply.
  2. 0

    Position:absolute is (almost) never the way. You got yoursef into a labyrinth you’re not gonna be able to get out, no matter how many media queries you try.

    By setting everything to position:absolute you’re removing everything from the flow, so basically making it ridiculously specific. Things should be able to position themselves automatically bellow others (display:block, clears, etc) or side-by side (floats, inline-blocks, flex, grid, etc) without recurring to strict positioning with left, top, etc.

    Most of the times making an element responsive is easy as switching the display from an inline-block, flex, etc to display:block. On grids is just using auto-fit or auto-fill, or adjusting the grid-template-columns on a query. Flexbox usually just fixes itself, or barely requires a change in the flex-basis.

    You’re making a good decision by trying to do it yourself without recurring to bootstrap, but you’re all over the place without knowing the theory of proper CSS positioning. So better find some documentation about CSS positioning and start again.

    Also avoid referring to elements by IDs, that will get you quite some specificity issues when trying to modify them. Here’s a great tutorial about it.

    And try to get a better understanding of the box model while you’re at it.

    Maybe try the (beta) responsive design tutorial at freecodecamp.
    When you really understand CSS positioning, specificity and box model, you’ll barely need a couple of media queries (and can even get away without)

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search