My page doesn't scale well as soon as I load it in a mobile device

Question

Basically, it's a random quote page but it is not displaying properly on mobile device screens. The background image doesn't cover the whole mobile screen it does cover the whole computer screen.

Also, the space that isn't covered gets filled with white. All the elements in mobile don't scale to the phone's resolution and I can't understand why.

I am a beginner and this is one of my first 'solo' projects sorry if the code is too messy.

I know this is probably been asked before but I can't seem to find a way to get around it no matter how much I searched...

Here's the code:

    body {
     font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
     margin: 0;
     padding: 0;
     background-image: url(''); /* look app.js */
     background-size: cover; /* so the image fits perfectly onto the background */
     background-position: initial;
     background-repeat: no-repeat;
}

    @media only screen and (max-width: 768px){
    body{
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    margin: 0 auto;
    padding: 0;
    background-image: url(''); /* look app.js */
    background-size: 1100px 1300px; /* so the image fits perfectly onto the background */
    background-position: initial;
    width: 420px;
    height: 360x;
    }

}

    #wrapper{
    position: relative;
    width: 700px;
    margin: 0 auto;
    min-width: 700px;
    max-width: 700px;
    min-height: 300px;
    max-height: 300px;
    /* Can't figure out how to stop container element from resizing if you zoom/unzoom the site */
}


    .container {
    position: relative;
    width: 700px;
    height: 300px;
    background-color: rgb(0, 48, 73, .80) ;
    margin: 0 auto;
    margin-top: 150px;
    border-radius: 50px;
    border-style: solid;
    border-color: rgb(64, 159, 223, .1);
    border-width: 0.2em;
    text-align: center;
    padding-top:1px;
    color: #cbc0d3;
}

    .title{
    width: 700px;
}

    .title h1 {
    color: #3a86ff;
    padding-top: 20px;
    padding-bottom: 0px;
}

    .title p {
    margin-top: -10px;
    margin-bottom: 40px;
    font-style: italic;
}

    .author{
    margin-left: 210px;
    margin-top: 30px;
    width: 700px;
    font-style: italic;
}

    .author span{
    color: #3a86ff;
}

    .random-quote{
    margin-top: 55px;
}

    .background-img{
    margin: 0 auto;
}

and the html:


    <!DOCTYPE html>
    <html lan="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title> Random Quote Generator </title>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body id="what">
        <main>
            <div id="wrapper">
        <div class="container">
            <div class="title">
                <h1>Inspiring Captions</h1>
                <p>Write it down ☯︎</p>
            </div>
            <div class="random-quote">
                <h2></h2>
            </div>
            <div class="author">
                <span></span>
            </div>
        </div>
    </div>
    </main>
    <script src="app.js"></script>
    </body>
</html>

also js:


    const containerElement = document.querySelector(".container")
    const titleElement = document.querySelector(".title")
    const quoteElement = document.querySelector(".random-quote")
    const authorElement = document.querySelector(".author")
    const bodyElement= document.querySelector("body")

    const randomQuote = {}
    const randomImage = {}

    getRandomQuote()
    getRandomImage()

    //Random image api
     function getRandomImage(){
     let apiImg = `https://random.imagecdn.app/v1/image?width=1920&height=1080&format=json`
     console.log(apiImg)
     fetch(apiImg)
     .then(function(response){
        let data = response.json()
        return data
    }).then(function(data){
        randomImage.content = data.url
        console.log(randomImage)
    }).then(function(){
        displayRandomQuote()
    })
}

     //Random quote api
      function getRandomQuote(){
      let api = 'https://api.quotable.io/random'
    console.log(api)
    fetch(api)
    .then(function(response){
        let data = response.json()
        return data
    }).then(function(data){
        randomQuote.quote = data.content
        randomQuote.author = data.author
    }).then(function(){
        displayRandomQuote()
    })
}

     function displayRandomQuote(){
    quoteElement.innerHTML = `${randomQuote.quote}`
    authorElement.innerHTML = `By: <span>${randomQuote.author}</span>`
    document.body.style.backgroundImage = "url('" + randomImage.content + "')" 
    //Changes the link of background-image property in styles.css so that it contains a random image url every time
}

Stephen Cronin · Answer 1 · 2022-10-15T20:32:12.490

I reworked your code a bit and made it more responsive.

<body>
    <main class="container">
        <div class="quote">
            <div class="title">
                <h1>Inspiring Captions</h1>
                <p>Write it down ☯︎</p>
            </div>
            <p class="random-quote">Happiness comes when your work and words are of benefit to yourself and
                others.</p>
            <div class="author">By: <span>Buddha</span></div>
        </div>
    </main>
    <script src="app.js"></script>
</body>

*,
*:before,
*:after {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

body {
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    margin: 0;
    padding: 0;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 20px;
}

@media screen and (min-width: 720px) {
    body {
        padding: 40px;
    }
}

.container {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.quote {
    width: 100%;
    max-width: 700px;
    background-color: rgb(0, 48, 73, .80);
    color: #cbc0d3;
    border-radius: 50px;
    border: 0.2em solid rgb(64, 159, 223, .1);
    text-align: center;
    padding: 20px 30px;
}

@media screen and (min-width: 720px) {
    .quote {
        padding: 55px 140px;
    }
}

.title h1 {
    margin: 0;
    color: #3a86ff;
}

.title p {
    margin-bottom: 40px;
    font-style: italic;
}

.author {
    font-style: italic;
    text-align: right;
}

.author span {
    color: #3a86ff;
}

.random-quote {
    margin-top: 55px;
}

My page doesn't scale well as soon as I load it in a mobile device

1 Answers1