CODEWITHSUNDEEP
htmlcss
Ricardo Sanchez Santos
Ricardo Sanchez Santos

Reputation: 534

Viewport width = device-width is not working

I have this angular app, and I want to add a responsive design for mobile version too, right now it looks horrible, I read about <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=yes"> but is not working.

enter image description here

On my browser or on my phone it looks like that, if I change my phone to horizontal, I can see the page well.

Here is my index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Cv</title>
    <base href="/" />
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=yes">
    <link rel="icon" type="image/x-icon" href="resumePhoto.png" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
    <app-root></app-root>
</body>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="/__/firebase/7.13.2/firebase-app.js"></script>

 <!-- TODO: Add SDKs for Firebase products that you want to use
 https://firebase.google.com/docs/web/setup#available-libraries -->
 <script src="/__/firebase/7.13.2/firebase-analytics.js"></script>

 <!-- Initialize Firebase -->
 <script src="/__/firebase/init.js"></script>
 </html>

You can find the repository in my github or here is the link of the app.

A funny thing is that if I change the value in the inspector let's say I change the scale from 1 to 1.1 it works, and if I return it to 1 I'll keep working, but at the beginning, it seems to be ignored.

My problem is that it looks chopped, it doesn't matter if a try to scroll to the right I don't see my top navbar.

Edit

I tried to add media queries, but I discovered something, my navbar is still there, I just can't see it but I can click on the buttons, and it looks like the header-nav takes more than the width of the device, in the next image you can see that the width is 310 px but the header-nav 520 from clarity takes the value of, perhaps that's why it looks weird, I'm thinking it has something to do with the project clarity classes

enter image description here

Upvotes: 1

Views: 4178

Answers (2)

Ricardo Sanchez Santos
Ricardo Sanchez Santos

Reputation: 534

Ok at the end, I find out the problem was I didn't read the whole documentation for project clarity, their components already have that responsive parts that normally you would do with @media queries, but turns out I have to add some properties to them to make them responsive.

In the end, I didn't have to add any @media queries, and it wasn't a problem of the viewport, I just added the property [clr-nav-level]="1" to my header and that fixed it.

 <div class="header-nav" [clr-nav-level]="1">

Here is the documentation in case you want to read it.

Upvotes: 0

user1849661
user1849661

Reputation:

In addition to your line here:

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=yes>

You need now to add some @media-queries for each size of screen you want your app to work on. You need to add those @media-queries to your css stylesheet so that it adjusts on whatever size. For example:

/* iPhone 6+/7+/8+ */
@media only screen and (min-width: 414px) and (max-width: 414px) {
// adjust the elements with css
}

You can set min-width or min-height or whatever you want to adjust to landscape modes etc.
More about media queries here

Upvotes: 1

Related Questions