I've got a problem with my website. <html> doesn't take full width on mobile.
I'm using Bootstrap + Jquery.
Do you know where my problem comes from .
Thanks !
My guess is that your viewport is off. To correct it, add this meta tag to your head:
<meta name="viewport" content="width=device-width, initial-scale=1">
For more information on the Viewport meta tag, see this MDN
page.
I am sure this is the causing the issue
<div class="container">
<div class="row"> <!--this adds negative margin.-->
<div class="col-x-*">
</div>
</div>
</div>
The structure is compulsory when using bootstrap.
Related
Has anyone had a problem with Material UI dropdown Select and Modals shift the content to the left? I tried to give it position: absolute I also tried to give the MenuItems position: absolute but the content was still shifted.
You can find information about this here: https://github.com/mui-org/material-ui/issues/10000
There are a number of related issues referenced there as well. There are different ways of fixing it depending on how the main window elements under the modal are being positioned.
In my React app, this worked for me.
<body style="overflow-y: scroll;">
//index.html
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body style="overflow-y: scroll;">
<noscript>
</noscript>
<div id="root"></div>
<script></script>
</body>
</html>
I must be missing something obvious, but here it comes... I just want to establish a narrow viewport width (320px) on my browser to check / design the web layout for a mobile phone display. Why is it that if set a viewport width with the meta tag, the browser doesn't respect it? This is what I do:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=320px" />
<style>
.content {
width: 100vw;
background-color: yellow;
}
</style>
</head>
<body>
<div class="content">
<p> Hello, this is the 'content' </p>
</div>
</body>
</html>
It just doesn't matter what size I put in the tag, it just seems to use the native display size. Can anybody tell me what the problem is and how to actually do it?
You don't need to set a viewport to check mobile compatibility. Just, click F + 12 keys in your browser chrome, and click on the mobile devices icon. This way you can select any viewport profile and check your design. See the image below:
I'm very new to the html5/css universe.
I'm trying to do something very basic and cannot comprehend why I'm getting the results I am. I would like to add a sidebar to the side of my content. I'm doing this by adding a 310px margin to my content and putting floating my side-content there. Easy!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div.sidebar{float:left;width:300px;padding:0;background-color:yellow;}
div.content{margin-left:310px;background-color:green;}
</style>
</head>
<body>
<div class="sidebar">
<h1>Sidebar</h1>
</div>
<div class="content">
<h1>Content</h1>
</div>
</body>
</html>
But something odd is happening, there seems to be a 1em padding above and below the sidebar (yellow), but not the content (green). As a consequence the titles "Sidebar" and "Content" are not aligned. I'm just wondering why the float:left automatically added what seems to be padding? And can this padding be removed? padding:0; seems to have no effect.
try this
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body,html{margin:0;padding:0px}
div.sidebar{display:inline-block;float:left;width:300px;padding:0;background-color:yellow;}
div.content{margin-left:10px;display:inline-block;float:left;background-color:green;}
</style>
</head>
<body>
<div class="sidebar">
<h1>Sidebar</h1>
</div>
<div class="content">
<h1>Content</h1>
</div>
</body>
</html>
Every browser has its own default ‘user agent’ stylesheet, that it uses to make elements appear more legible. For example, most browsers by default make links blue and visited links purple, give tables a certain amount of border and padding, apply variable font-sizes to H1, H2, H3 etc. and a certain amount of padding to almost everything. The padding your are having is because of default browser setting. Try a global reset for elements.
eg: * {margin:0;padding:0}
I need to make my footer stay on the bottom but also have it not interfere with my content. As seen in the jfiddle, the blue box interferes with the footer. After looking through all the current threads and trying to fix my CSS and HTML, I could not find my solution. I tried changing the position to fixed, adding some padding, etc. Below is my code:
http://jsfiddle.net/9A2gL/8/
Basically I have:
<html><div id="wrapper"><header></header>
<body></body>
<footer></footer></div></html>
I do have floating divs but I used clearfix so clear: both;
Also, please read this: I do have a valid HTML structure but jsfiddle doesn't recommend the tags to be placed. Please focus on the floating aspect as when I take float:right;in the CSS off of the .news it is working. When I remove the code to make the footer stick at the bottom of the page, it also works.
Your HTML Mark is Messed Please first of all W3C Stabdards, and correct your HTML Markup some thing like this
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<header></header>
<footer></footer>
</body>
</html>
Sencond for your footer please apply clearfix class there after proper markup or just
.Clear{
clear:both;
}
You are good to go (y).
I understand it was a fiddle (THANK YOU!), but your HTML tags are out of place. That being said, the image I see from your fiddle is as follows
<div id="wrapper">
<div id="container">
<!-- REMOVED body HTML tag-->
<div id="content">...</div>
<aside>
<div class="advert">..</div>
<div class="news">..</div>
</aside>
<!-- End Container -->
</div>
<div class="clearfix">..</div>
<footer>..</footer>
<!--End Wrapper-->
</div>
edit
Add bottom margin to your aside.
The clearfix div should be added before the end div of container.
I'm making an ASP.NET MVC5 web app. The default template uses bootstrap, which is fine for almost all of the pages. However I need one page to have width: 100%.
The view I would like to use this is a partial view, so it will be rendered in the .container (see code below), as well as the other partial views.
<div class="container">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
All of them are fine to be fluid, but I need this one to be 100% width. What is an elegant way to do it?
In your partial view, you can use jQuery to modify the CSS of the container div. This would change the width whenever that view is rendered, but would no effect on other pages.
EDIT: As the OP pointed out, Bootstrap's JS will reset the width on window resize. So we have to do the same:
$(document).ready(function(){
setWidthOfContainer();
$(window).resize(setWidthOfContainer);
});
function setWidthOfContainer(){
console.log("Setting width of container to 100%.");
$('div.container').css('width','100%');
}
See the fiddle here: http://jsfiddle.net/GqRd7/
I had a similar problem, where the container was used in the Layout and fine for most pages, but I wanted an odd full width element within that container.
As of Bootstrap 3, you can use the .container-fluid class for 100% width content. However, using this within .container does nothing, as it is limited by the .container width. Here are a few options/workarounds I've come across:
Use sections
If the 100% width content is always used at the beginning or end of the container content, you could define sections in the layout page, and insert the 100% width element in there.
Layout:
<div class="container-fluid">
#RenderSection("containerFluid", required: false)
</div>
<div class="container">
#RenderBody()
</div>
View:
#section containerFluid
{
<div>Full width content.</div>
}
<div>Other content</div>
In your case, if you had no other content on that one page, you could just put the whole page in the section.
Use another layout page
If it's a whole page that needs to be full width, you could just get it to use a different layout. Use partials for the common code and change the .container element to .container-fluid.
Normal layout:
<!DOCTYPE html>
<html lang="en">
#Html.Partial("_LayoutHead")
<body>
#Html.Partial("_Navbar")
<div class="container">
#RenderBody()
</div>
#Html.Partial("Footer")
</body>
</html>
Alternative layout
<!DOCTYPE html>
<html lang="en">
#Html.Partial("_LayoutHead")
<body>
#Html.Partial("_Navbar")
<div class="container-fluid">
#RenderBody()
</div>
#Html.Partial("Footer")
</body>
</html>
Manually close the container and reopen later
I wouldn't really recommend this one, as it's very hacky, and will show up errors, but it does compile and work. This can be used if you have an element somewhere in the middle of the content that you want to be full width for whatever reason.
View:
<div>Some normal content here.</div>
</div> <!--This shows an error for missing a starting tag. The actual starting tag is on the layout page.-->
<div class="container-fluid">
<div>Full width div</div>
</div>
<div class="container"> <!--This shows an error for missing an ending tag. It actually gets closed using the end tag in the layout page-->
<div>Back to normal</div>
I managed to solve it by making the position of the rendered content absolute and left: 0, but <footer> is hidden behind it, so I have to take care of that one separatelly (or remove it altogether). Not the elegant solution I was wishing for, but works.
You can use the razor code to change the page's style in _Layout.cshtml file.
<div class="container" style="#(ViewData["Title"] == "Page1" ? "max-width: 100%;" : "")">
Replace "Page1" with your real page title.