CODEWITHSUNDEEP
htmlcss
Simon Bolduc
Simon Bolduc

Reputation: 185

Text doesn't get smaller on mobile

In my header, I added a zone where it shows a text. The problem is that the text doesn't get smaller on smaller devices so not all the text appears in its box. I would like to make the text fit in the box (get smaller so everything enter the box)

body{
    margin:0;
    padding:0;
    font: 15px/1.5 Montserrat,sans-serif;
    color:white;
    background-color:#212121;
}
.container{
    width:80%;
    margin:auto;
    overflow:hidden;
}
header #top-info{
    background-color:#263238;
    min-height:50px;
    border-bottom:1px solid #546E7A;
}
header #top-info #online{
    background-color:#558B2F;
    float:left;
    min-height:50px;
    min-width:330px;
}
header #top-info #online p{
    margin:0;
    padding:0;
    padding-top:12px;
    padding-right:10px;
    font-size:18px;
    font-weight:bold;
    text-shadow:1px 1px 1px #212121;
    text-transform: uppercase;
}
header #top-info #online img{
    padding-left:10px;
    padding-right:10px;
    padding-top:8px;
    float:left;
    width:10%;
}
header #top-info #online span{
    color:#7CB342;
}
header #top-info #btn{
    float:right;
    margin-top:12px;
}
header #top-info #btn a{
    text-decoration: none;
    color:white;
    text-shadow:1px 1px 1px #212121;
    text-transform: uppercase;
}
header #top-info #btn img{
    width:15%;
    vertical-align: middle;
}
header #top-info #btn ul{
	margin:0;
	padding:0;
}
header #top-info #btn li{
	float:left;
	list-style-type:none;
}
header #navigation{
    background-image:url('../img/background.png');
    background-repeat: no-repeat;
}

@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px){
    header #online{
        float:none;
        text-align:center;
        width:100%;
    }
    header #top-info #online img{
        display:none;
    }
    header #top-info #online p{
        margin:0;
        padding:0;
        text-align:center;
        margin-right:26px;
        margin-top:10px;
    }
    header #top-info #btn{
        margin:auto;
        text-align:center;
        margin-bottom:10px;
    }
}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width"/>
        <meta name="description" content="Menoria siteweb officiel">
        <meta name="keywords" content="menoria, pvpfaction, minecraft, 1.7.10, launcher">
        <meta name="author" content="Simon Bolduc">
        <title>Ménoria | Serveur 1.7.10</title>
        <link rel="stylesheet" type="text/css" media="screen" href="css/style.css"/>
        <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700%7cOpen+Sans:400,700" rel="stylesheet" type="text/css">
    </head>
    <body>
        <header>
            <section id="top-info">
                <div class="container">
                    <div id="online">
                        <img src="https://dev.menoria.com/img/online.png"/>
                        <p>Il y a <span>416</span> joueurs en ligne</p>
                    </div>
                    <div id="btn">
                        <ul>
                            <li>
                                <a href="#">
                                    <img src="https://dev.menoria.com/img/login.png"/>
                                    Se connecter
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="https://dev.menoria.com/img/register.png"/>
                                    S'inscrire
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </section>
            <section id="navigation">
                <div class="container">
                    <div id="logo">
                        <h1><span>M</span>enoria</h1>
                        <p><span>Ménoria</span> | Serveur Minecraft <span>1.7.10</span> sous launcher</p>
                    </div>
                    <nav>
                        <ul>
                            <li>
                                <a href="#">Accueil</a>
                                <p>Page d'accueil</p>
                            </li>
                            <li>
                                <a href="#">Forum</a>
                                <p>Communautaire</p>
                            </li>
                            <li>
                                <a href="#">Jouer</a>
                                <p>Nous Rejoindre</p>
                            </li>
                        </ul>
                    </nav>
                </div>
            </section>
            <section id="bottom-info">
                Vous avez un problèmes? Contactez-nous sur le Teamspeak. <span>ts.menoria.com</span>
            </section>
        </header>
    </body>
</html>

The problem appears there: Problem

I've tried to modify this with a media with custom width but I can't find how to correct this...

Upvotes: 1

Views: 266

Answers (2)

Shasha
Shasha

Reputation: 433

use font size 100% on all your text, it will respond according to the text size if it doesn't, you can tweak the font size with css media queries like this 

 <style>
         @media screen and (max-width: 820px) {
         header #top-info #online p{
         font-size:14px; //edit this font size to fit your taste and also just copy and paste and use the sample format to tweak other codes. IF you want to add more css text to reduce size add in the media query
         }
    .container{
        width:100%;
        margin:auto;
        overflow:hidden;
    }
header #top-info #online{
    background-color:#558B2F;
    float:left;
    min-height:50px;
}
     }
 </style>

Upvotes: 0

curveball
curveball

Reputation: 4505

Well, my first idea is not about adjusting font size, I would handle this flaw from a different angle: remove min-width: 330px; on header #top-info #online and the text will naturally flow to the second line. You could align it as you wish.

Alternatively, add something like

@media only screen and (max-width: 374px) {
    header #top-info #online p {
        font-size: 14px;
    }
}

to the end of your styles.

Upvotes: 2

Related Questions