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">
Related
I am using semantic-ui-react for my website. I want to make all the components mobile friendly. But when I look at the website on mobile, all the elements are rendered very small. Please find the image below:
How do I make elements appear bigger on mobile? Also I want responsive menu for mobile version. Could anyone please let me know ?
Thanks
do you already have this meta tag <meta name="viewport" content="width=device-width, initial-scale=1"> in your html? I think it is just missing that.
Make sure you have the appropriate meta tag in your HTML between <head></head> and of course reference the CSS (importing in js is fine too):
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<link
rel="stylesheet"
href="//cdn.jsdelivr.net/npm/semantic-ui#2.4.1/dist/semantic.min.css"
/>
Thanks Laurens Deprost for the help!
I have fixed this issue. There were 2 problems actually.
The first one was that I was using domain forwarding from godaddy with masking enabled. Due to this entire site was displayed inside a frameset and media queries were not working. To fix this I added a custom domain in Heroku and used that as a CNAME record in godaddy.
Then I also applied css with media queries from here:
https://gist.github.com/phuphighter/ce980aaec1c7104846f7e944743a7e07
With these two fixes in place, the site is working fine.
Thanks
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>
experts.
I´ve found no solution for this Problem. I used Bootstrap to Build up a template for me, but here´s the Problem:
I don´t want the site to get scaled (views for tablet or mobile)...
That means if the width of the screen is under i think 980px* it scales down.
--> Short: How to disable the other views/scale down (phone/tablet) in Twitter Bootstrap?
thanks for reading/helping.
Don't include bootstrap-responsive.css (or it's minified version) in your header, just bootstrap.css (or it's minified version).
A.k.a Locate these in your <head> and remove:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="path/to/css/bootstrap-responsive.css" rel="stylesheet">
The #media queries that make the responsive layout are located in this css.
For more info, read http://twitter.github.io/bootstrap/scaffolding.html#responsive
I need some help. I have made this side in Joomla, and cant get my footer to have a 100% width on an Ipad. Its like it wont get furder then my footer content.
Can some one please help me adding the right css?
My website is: www.webkjaer.dk
And here is the Ipad emulator
Try adding this to your website head
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
I have used twitter bootstrap in my project with DotNetNuke. I did my designing and layout using HTML, CSS, bootstrap. The responsive design was working fine when I tested it on different mobile devices and even if when I resize my browser window.
As it was working well, I converted the design to DotNetNuke Skin. Now, the responsive design works fine only when I resize the browser window and not on mobile devices. I understand the flow in which DNN loads stylesheets and I have followed it. I have made my skin.css as a combination of bootstrap.css and followed by the content of bootstrap-responsive.css
I am not able to find the problem as if I use the same skin.css with my html, it works fine but it doesn't work with DNN (on mobile devices).
You're missing the meta that targets mobile devices for proper scale. Insert the following in the header of your page:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I just notice something interesting and want to share it, maybe it will help someone. In the site header section you should include first the bootstrap.css and only after that the bootstrap-responsive.css because obviously the responsive.css depends on the the bootstrap.css
Of course the meta tag should be also present.
<link href="/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Make sure responsive CSS(responsive.css) is included after basic not before.