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.
Related
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 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 used Bootstrap for groundwork to develop the site to be responsive. The problem i have encountered is that when I try to watch to watch a site on mobile or tablet device the site wont response to the screen resolution. But when I try the Responsive Design View on Mozilla it all works fine. They order of included css files is Bootstrap, then my custom css and some custom query css which I used to tweak some content things.
Do you have the following within your head of your page?
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
If the above does not work can you please paste some code from your page for us to see what the issue could be? Thanks.
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 am trying to make this site more responsive and have started by making all the attributes in responsive terms such as % and ems, but for some reason it isn't as responsive as I would like. I decided to use media queries to make up for the design flaws.
I've been reading Responsive Web Design by Ethan Marcotte and it helps a lot with most of the design, but the media queries don't seem to be working for my iPad or iPod (aka I'm doing something wrong).
Can anyone readily identify what it is that I'm doing wrong?
http://thelglymovement.com/
I would have to see your code to be completely sure, but from what I can see when I pull up your website, the stylesheet imports below are not actually finding the files from your project folder:
<link rel="stylesheet" href="styles/base.css"/>
<link rel="stylesheet" href="styles/skeleton.css"/>
<link rel="stylesheet" href="styles/layout.css"/>
the only file that seems to be loaded is
<link rel="stylesheet" href="styles/index.css" />
and it does not include any media queries.
When I resize the website in Google Chrome I am not seeing any responsive changes which makes sense because 3 of your style sheets aren't present.
If it seems to be working in your desktop browsers, but the media queries aren't working on mobile I would might take a guess you don't have the viewport meta tag. i.e. <meta name="viewport" content="width=device-width, initial-scale=1">
This makes sure that the mobile devices don't try to scale your webpage down to fit their device size, instead allowing you to determine widths in your CSS (and media queries). This MDN article on the viewport meta tag might be useful for more info.