CODEWITHSUNDEEP
htmlcssresponsive-design
hoodakaushal
hoodakaushal

Reputation: 1293

Webpage has inconsistent text size on mobile

I'm trying to make a simple webpage for an assignment that should have 3 different layouts depending on screen size. Here's the assignment. Everything is working fine on desktop - the layout is as I expect, and changes as I change the width of the browser window. You can try it out yourself here.

On mobile however, there's a weird issue. One of the text boxes has size larger than the others, and I can't figure out why.

Here's what it looks like on desktop in Chrome: enter image description here

This is exactly how I want it to look like. But here's the mobile view, using the device emulator in chrome dev tools:

enter image description here

As you can see, the text in the blue box is way larger than the other two, and I have no idea why, since I didn't mess with font sizes at all.

Here's the HTML:

<!DOCTYPE html>
<html>
<head>
    <title>The Best Colors</title>
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;
</head>
<body>
<h1>The Best Colors</h1>
<div id="container">
<div id="yellow">
    <h2>Yellow</h2>
    <p>Yellow is the best of the best. It is the color of a brightness, of a sunny day after the winter, of sunflowers and fresh lemons. It brings to mind warmth and happiness and cheerfulness. It is the color of optimism and positivity. Yellow is also the title of a very relaxing Coldplay song. </p>  
</div>
<div id="green">
    <h2>Green</h2>
    <p>Green is the color of nature. It brings to mind forests full of life, fields full of bounty. It is the color of spring and youth. Green also symbolises fertility and good health, though also envy. Green is also the color associated with life, since most terran vegeation is green. It's a pretty good color overall.</p>

</div>
<div id="blue">
<h2>Blue</h2>
<p>Ah, blue. Blue is the color of the infinite. The skies above and the seas below, limitless and full of possibilities and wonders, are both blue. It also has a lot of energy, being on of the higher frequency colors. It is also associated with masculinity and boys, the counterpoint to the classic pink, though this association has been getting less popular. </p>

</div>

</div>
</body>
</html>

And the CSS:

div{
    margin: 0.5%;
    box-sizing: border-box;
}

body{
    background-color: #C0C0C0;
}

div#yellow, div#green, div#blue{
    border: 2px solid black;
}

h1{
    font-size: 250%;
    font-family: times;
    font-weight: bold;
    font-style: italic;
    text-align: center;
    width: 100%;
}

h2{
    float: right;
    width: 25%;
    text-align: center;
    font-weight: bold;
    margin: 0px;
    border-top: 0;
    border-right: 0;
    border-bottom: 2px solid black;
    border-left: 2px solid black;
}

p{
    clear: both;
    padding: 10px;
    text-align: justify;
    font-family: serif;
}


div#yellow{
    color: red;
    background-color: yellow;
}

div#green{
    color: black;
    background-color: green;
}

div#blue{
    color: white;
    background-color: blue;
}

div#yellow > h2{
    color: yellow;
    background-color: red;
}

div#green > h2{
    color: green;
    background-color: black;
}

div#blue > h2{
    color: blue;
    background-color: white
}

@media (max-width: 767px){
        div#container{
        position: relative;
        overflow: hidden;
    }

    div#yellow, div#green, div#blue{
        float: left;
        clear: both;
    }
}

@media (min-width: 768px) and (max-width: 991px){
    div#container{
        position: relative;
        overflow: hidden;
    }

    div#yellow, div#green{
        float: left;
        width: 49%;
    }
    div#blue{
        clear: both;
        width: 99%;
    }
}

@media (min-width: 992px){

    div#container{
        position: relative;
        overflow: hidden;
    }

    div#yellow, div#green, div#blue{
        float: left;
        width: 31%;
    }
}

And I just realised that the above image has 667 width and should be using a single column layout, since in the CSS my cut-off for that is 767px.

Any pointers as to why the site looks so different on mobile? I thought the meta tag that disabled zoom etc. should suffice, but clearly it's not enough.

Upvotes: 1

Views: 378

Answers (1)

SESN
SESN

Reputation: 1283

Your meta tag is not properly implemented and not closed. Replace with this meta tag Here is your answer:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

In your code: This is wrong

<meta name="”viewport”" content="”width=device-width;" initial-scale="1.0;" maximum-scale="1.0;" user-scalable="no;" <="" head="">

Upvotes: 2

Related Questions