CODEWITHSUNDEEP
htmlcss
Skeptar
Skeptar

Reputation: 149

CSS responsive design for smartphone

I created a little page: Link Here is the code:

*{
    margin: 0px;
    padding: 0px;
}

body{
    background-color: rgb(25, 81, 118);
}

.text {
    width: 70%;
    text-align: justify;
    font-size: 32px;
    color: white;
    margin-right: auto;
    margin-left: auto;
    margin-top: 200px;
}
nav{
    width: 100%;    
    background-color: white;
}

ul{
    font-size: 0px;
}
<!DOCTYPE html>
<html>
    <head>
        <link href="css.css" type="text/css" rel="stylesheet">
        <meta charset="utf-8"> 
    </head>
    <body>
        
        <div class="text"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p></div>
    </body>
</html>

If i view this side with my laptop it looks normal (i use Mozilla). Now i opened the page with my smartphone and it looks like this. Picture

At the picture the number 1 is perfect, but not the picture 2. The text field should be 70% of the screen. Maybe someone of you have an idea.

Upvotes: 0

Views: 187

Answers (2)

cch
cch

Reputation: 3386

Add a viewport in head: 

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

Also, you can specify your mobile CSS inside a media query: 

@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) { /* STYLES GO HERE */}

See Media queries for standard devices.

Upvotes: 4

Bruce Santos
Bruce Santos

Reputation: 73

Try using this meta tag in your HMTL head. 

<meta name="viewport" content="width=device-width">

or

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

For more info on this, take a look at this article on CSS Tricks

Upvotes: 3

Related Questions