I'm using Materialize for my navbar. I'm attempting to make the navbar collapsible into a sidebar on mobile as shown here. It does collapse into a sidemenu, but the navbar is too small on mobile as shown here. How do I make the navbar narrower and taller so it is more usable on mobile? I'm also using this with Meteor using the materialize:materialize package if that is relevant.
Adding head tag with viewpoint meta tag (once) before any given <template> tag solved the issue for me. Meteor, prior to rendering the page, looks up all head tags and adds them into header, and to display properly on mobile, you need viewpoint meta tag:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
Related
I'm trying to make different dimension of one modal.
If I resize in the Browser the change is what I want.
But, if I change the Chrome to simulate a mobile environment or if I open the code at my phone it doesn't work.
I the example I tried to make a mobile first approach. My dialog-content is white as default. Then I change to blue if the width is bigger than 750px and to black if is bigger than 1000px. I make other change too but the color is the important one in the examples.
I would like to know why my "default" case is not working for mobile.
The code can be found here.
Try adding viewport meta tag in the head of the document:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<!-- ... -->
</body>
</html>
I've implemented Media CSS in my website and when I resize it in Chrome-Devtools it adjusts fine.
But when I try it on mobile it shows like in a full desktop page.
Here's my website:
dinf
when resizing the page in Devtools:
When simulating mobile
Can you please explain how can that be?
Just add the following line to the head tag of your page:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
It allows elements and fonts to correctly scale on mobile devices. I suggest you to read this article about it.
I am using menu component from antd, See Example 1 from the site. The code can also be seen from here. As seen from the code, the menu items are responsive. But I copied the exact same code, but it is not responsive.
Why is that so?
Did you add this Into your html (or php) file?
meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
The site look perfect when viewed from desktop But when I tried to access in mobile , it doesn't show navbar and background image and only load html content and columns . Any suggestion how to fix it.
It will be hard to find a perfect answer without any code or details but one of the things you can do is to add Bootstrap to the website
So what is Bootstrap ?
Bootstrap is an open source toolkit for developing with HTML, CSS, and JS but its biggest advantadge is that it comes with responsive elements so you don't have to worry about how it will look on other devices since the Bootsrap elements are already responsive.
One of the easiest way to do it is to add the following code in your code in your "head" section :
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
Now all you need to do is to put your elements (for example your navbar) into Bootstrap classes (and if needed personalize them) so that it comes out properly on all devices
As for how to actually use the bootstrap elements and personalize them here is some documentation :
https://www.w3schools.com/bootstrap4/default.asp
https://getbootstrap.com/docs/4.3/getting-started/introduction/
I hope this help and if not then feel free to give more details about your issue so that I can try to give you a better answer :)
I created this website: http://www.articaclima.it/home
As you can see, by resizing the browser window the mobile responsive css theme is working quite good.
Anywhere, by toggling device toolbar in the browser, or by viewing it in a mobile browser, the mobile css theme is not showing at all.
What could the problem be?
Thank you
Add Meta Viewport tag
<meta name="viewport" content="width=device-width, initial-scale=1.0">
your website is missing this.
Hope this Helps..
The problem was that into , dynamically generated via JS: there was an "user-scalable=0".