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 :)
Related
I have a problem with the navigation bar,
I have a navigation bar for my project. As you can see my code below if I use the link and get it from an external source it is working well. But there is a problem for me when the net is a bit slow I can see the navigation's loading on my screen. it is a very small duration but it disturbs me very much. So I decided to use CSS source from my project folder but could not do that. I tried many code samples but could not do it correctly. If somebody helps me, I will appreciate it. Thanks.
I am also still trying to solve it but I wanted to get some help.
function MyNavBar(params) {
//console.log(params["conpanyID"]);
return (
<div>
<head>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
/>
</head>
1-When I use link/external source
[1]: https://i.stack.imgur.com/SO5qB.png
2-When I use CSS file from my project folder.
[2]: https://i.stack.imgur.com/MqHqo.png
you might have linked your stylesheet inside the body instead of the header section , because of which your page will load first, then your CSS
here is an example
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>file</title>
<link rel="stylesheet" href="css/s.css">
<link rel="icon" href="css/si.ico">
</head>
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
After struggling to get a Bootstrap responsive page to work in IE8, I've simplified it incredibly, creating a very basic page that should only display the size of the browser using the "visible" classes, but still cannot get the page to render properly in IE8. I've read where respond.js must be on the same subdomain as the CSS, and fixed that, but it still doesn't work. After much trial and error, reading through documentation (getbootstrap.com, responsejs.com, etc.), and reading some threads on stackoverflow, I thought I'd post my issue.
Here's the code, which is supposed to display the size of the browser, The page is hosted in a landing page, marketing automation program, called Eloqua, hence the strange and lengthy URLs for the CSS and JS files:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!-- Bootstrap -->
<link href="http://images.response.test.com/Web/test/{08fa83ba-e64a-401e-a642-8bc74434d750}_bootstrap.min.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="http://images.response.test.com/Web/test/{5cdf751f-5097-4163-a9f3-b03c33408410}_html5shiv.js"></script>
<script src="http://images.response.test-mail.com/Web/test/{7caa6bb7-1d4d-422e-bfaa-e4f4afdb8da1}_respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>IE8 Test</h1>
<p>The Bootstrap grid type should be displayed below: </p>
<div class="container">
<p class="visible-lg">Large grid is being displayed. The grid stacks horizontally < 1200px. </p>
<p class="visible-md">Medium grid is being displayed. The grid stacks horizontally < 992px. </p>
<p class="visible-sm">Small grid is being displayed. The grid stacks horizontally < 768px. </p>
<p class="visible-xs">Extra small grid is being displayed. This grid is always horizontal. </p>
</div>
<script src="https://code.jquery.com/jquery.js"></script>
<script src="http://images.response.test-mail.com/Web/test/{08fa83ba-e64a-401e-a642-8bc74434d750}_bootstrap.min.css"></script>
<script src="http://images.response.test-mail.com/Web/test/{4f3edd38-e24f-4f56-8336-dbb33cc5567b}_css3-mediaqueries.js"></script>
</body>
</html>
Thanks for any help.
In the GetBootstrap.com docs it reads, essentially, that any css used by Respond.js must be a relative path from the root of the html document, so you can't use absolute paths in your css url OR you can set up a proxy as per the Respond.js documentation.
Respond.js works by requesting a pristine copy of your CSS via AJAX,
so if you host your stylesheets on a CDN (or a subdomain), you'll need
to upload a proxy page to enable cross-domain communication.
DOCS: https://github.com/scottjehl/Respond
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 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.