Html Question posted in
Some basic documentation can be found here.

Problem with html and css code when opened with mobile

I was coding the home page of my new project without thinking about how could it be on a vertical device. now i just finished with the page and i tried to see it with different devices on the chrome inspect and it is just not good. my question is, i am pretty new with the whole web desining world, should i change just the mobile css with @media…. or should i start over the whole css?
I will leave my code.
Any tip or suggestion is welcomed, thanks.

<!DOCTYPE html>
<html class="html">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">   
        <link rel="stylesheet" href="home.css">
    </head>
    <body>
        <section class="section" id="pablitoshotit">
            <div class="home-container">
                <div class="home-background" style="background-image: url('imgs/home-type-3-1.JPG');"></div>
                <div class="home-content">
                    <p class="contacts"><a class="contacts-link" href="#contacts">CONTACTS</a></p>
                    <h1 class="titolo" id="titolo-1">
                        PABLITO
                    </h1>
                    <h1 class="titolo" id="titolo-2">SHOT IT</h1>
                </div>
                <div class="hero">
                    <nav>
                        <ul>
                            <li><a class="nav-link" href="#streetphotography">STREET PH</a></li>
                            <li><a class="nav-link" href="#artists">ARTISTS</a></li>
                            <li><a class="nav-link" href="#rideout">RIDE OUT</a></li>
                            <li><a class="nav-link" href="#live">LIVE</a></li>
                            <li><a class="nav-link" href="#about">ABOUT</a></li>
                        </ul>
                    </nav>
                </div>
            </div>
        </section>
        <script src="home.js"></script>
    </body>
</html>

*{
    margin: 0;
    padding: 0;
    height: 100%;
}

html, body{
    overflow: hidden;
}

body{
    background-color: black;
}

.home-container{
    position: relative;
    width: 100%;
    height: 100%;
}

.home-background{
    position: absolute;
    top: 10%;
    left: 0;
    width: 100%;
    height: 80%;
    background-color: black;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: -1;
}

.home-content{
    position: relative;
    z-index: 1;
    text-align: center;
    padding-top: 15%;
}

.contacts{
    position: absolute;
    top: 15px;
    right: 15px;
}

.contacts-link{
    font-size: 12px;
    color: #fff;
    text-decoration: none;
}

.titolo{
    font-size: 100px;
    letter-spacing: 15px;
    color: #fff;
}

#titolo-1{
    margin-left: -800px;
    margin-top: -150px;
}

#titolo-2{
    margin-right: -800px;
    margin-top: -250px;
}


.hero{
    width: 100%;
    height: 100vh;
    background-image: linear-gradient(rgba(12,3,51,0.3),rgba(12,3,51,0.3));
    position: relative;
    padding: 0 5%;
    display: flex;
    align-items: center;
    justify-content: center;
    bottom: 0;
}

nav{
    width: 100%;
    position: absolute;
    padding: 20px 8%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -500px;
    margin-left: -200px;
}

nav ul{
    list-style: none;
    display: inline-flex;
}

nav ul li{
    list-style: none;
    display: inline-block;
    margin-left: 20px;
}

nav ul li a{
    text-decoration: none;
    color: #fff;
    font-size: 12px;
}

document.addEventListener('DOMContentLoaded', function (){
    const images = ['imgs/home-type-3-1.jpg', 'imgs/home-type-3-2.jpg', 'imgs/home-type-3-3.jpg', 'imgs/home-type-3-4.jpg', 'imgs/home-type-3-5.jpg', 'imgs/home-type-3-6.jpg', 'imgs/home-type-3-7.jpg', 'imgs/home-type-3-8.jpg', 'imgs/home-type-3-9.jpg', 'imgs/home-type-3-10.jpg'];
    const homebackground = document.querySelector('.home-background');
    let index = 1;

    const imageObjects = [];
    images.forEach(function(imageSrc) {
        const img = new Image();
        img.src = imageSrc;
        imageObjects.push(img);
    });

    function changeBackground(){
        homebackground.style.backgroundImage =  `url('${images[index]}')`;
        index = (index+1) % images.length;
    }

    setInterval(changeBackground, 2000);
});
Tags:

2

Answers


  1. 0

    You can start adding breakpoints for standard resolutions (mobile, tablet and web) and adjust the styles for each resolution.

    The code may end up a little dirty, but as long as it works, practice will make you improve.

    Login or Signup to reply.
  2. 0

    You can start by adding media query. you need not to start over the whole css.

    try to fix screen on mobile first , add css properties needed on large screens (Laptop and Desktops) inside the following media query.

    @media (min-width: 992px) {
   //add css for large screens here
}

    css for medium screens (tabs and others) add inside the following media query

    @media (min-width: 768px) and (max-width: 1024px) {
 //add css for medium screens here
 }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search