I recently published a site and I realize that the size of each page of this site is always wider than the size of the screen (Even if my screen has a resolution of 3840 * 2160!) .
I use Boostrap 4 and in the _Layout view, I have by default the meta tag which allows to adapt the size of the page to the used device:
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
I did not touch the bootstrap.css file (at least nothing who's related to the size).
I noticed that if in the _Layout view I remove all which form the top of my page (my menu), the width of the page is correct (but it is obviously not a solution).
So I have a removed one div class each per each to see which one provided the problem but no way, each time the width is always greater than the page.
Do you have an idea?
<div class="bs-docs-section clearfix">
<div class="row m-0">
<div class="col-lg-12">
<div class="bs-component">
<nav class="navbar navbar-expand-lg navbar-light" style="background-color:#C6DA4B">
<div class="container p-0">
<div class="navbar-header">
#Html.ActionLink("Home", "Index", "Home", null, new { #class = "navbar-brand" })
</div>
<div class="collapse navbar-collapse" id="navbar">
//code
</div>
<partial name="_LoginPartial" />
</div>
</nav>
</div>
</div>
</div>
</div>
EDIT
With row m-0, it show like that
give margin: 0; first to row class or m-0, so it not be wider or remove horizontal bar from your page.
for full width add class padding: 0; or p-0 in your container class
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="bs-docs-section">
<div class="row m-0">
<div class="col-lg-12 p-0">
<div class="bs-component">
<nav class="navbar navbar-expand-lg navbar-light" style="background-color:#C6DA4B">
<div class="container p-0">
<div class="navbar-header">
#Html.ActionLink("Home", "Index", "Home", null, new { #class = "navbar-brand" })
</div>
<div class="collapse navbar-collapse" id="navbar">
//code
</div>
<partial name="_LoginPartial">
</div>
</nav>
</div>
</div>
</div>
</div>
I don't know much about bootstrap, but it seems like you need another "container" div around your "row".
<div class="container">
<div class="row">
[etc]
</div>
</div>
Bootstrap row has a default left and right margin with -15px that's why the page shows horizontal scroll bar. To fix this we have a container wrapped to the row like .container or container-fluid (Depends according to the layout).
Related
Building a website with Laravel5 and Bootstrap4.
I'm getting a FOUC with a brief width of my page at 1/5 of width before expanding to real width.
The reason seems to be attached to how i use container-fluid.
I am using 'container-fluid' as i want to have a vertical left sidebar with content at the left of main page.
On a simple page, code is as per below :
<div class="container-fluid px-0">
<div class="d-lg-flex flex-lg-row justify-content-center ">
#yield('left_side')
<div class="col-12 col-lg-10 col-xl-10 custom-width">
<div class="container">
<div class="row justify-content-center" >
<div class="col-12">
<div class="card page_card" >
<div class="mx-auto" style="min-height: 70vh">
<p> example..</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
When removing my side-bar and using 'container' instead of container-fluid, the display is at correct width as soon as the page loads.
Correction
It is not about a width change. It seems briefly this is my side column which appears blank in the center with main page aligned vertically, before having the 2 pieces being put aligned horizontally
Addition1 - GIF of my FOUC-error
Here is an example of the FOUC:
It seems the FOUC is caused by my 'Google Ad'-div (in Yellow) i have inserted in my topbar containing my navbar. Some website have their ads appearing above the navbar so this can be done. Any clues?
<!-- for navigation and title on screen < lg -->
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark navbar-fixed-top d-lg-none">
<div class="container">
<div class="row" >
<div class="col-2">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsMain" aria-controls="navbarsMain" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsMain">
<ul class="navbar-nav mr-auto" style="width: 200px">
<li class="{{Request::is('/') ? 'active' : ''}} nav-item">
<a class="nav-link">AAA </a>
</li>
<li class="{{Request::is('sentiment') ? 'active' : ''}} nav-item">
<a class="nav-link" >BBB</a>
</li>
<li class="{{Request::is('exchanges') ? 'active' : ''}} nav-item">
<a class="nav-link" >CCC</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
<div class="top-bar d-lg-none">
<hr class="divider-under-title mt-0 d-lg-none" />
<div class="container">
<div class="row justify-content-center" >
<div class="col-12">
<div class="top-ad d-none d-sm-block">
<script async defer src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- top-ad2 when removed, FOUC disappears -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-66666"
data-ad-slot="44444"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script async defer>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>
<div class="col-12">
<!--<link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet">-->
<div class="ad_block_message_id">
Oh nasty adblocker. <i class="em em---1"></i>
</div>
</div>
</div>
</div>
</div>
<!-- for market segment on screen >= lg -->
<div class="top-large-bar d-none d-lg-block">
<!-- for Title on screen >= lg -->
<div class="row">
<div class="col-lg-12">
<h1 id="title" class="d-none d-lg-block">
<a class="deco-none" href="/">TEST</a><sup><code class="code_sup_text"></code></sup>
</h1>
</div>
</div>
<div class="container">
<div class="row justify-content-center" >
<div class="col-12">
<div class="top-ad d-none d-sm-block">
<script async defer src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- top-ad2 when removed, FOUC disappears -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-666666"
data-ad-slot="444444"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script async defer>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>
<div class="col-12">
<!--<link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet">-->
<div class="ad_block_message_id">
Oh nasty adblocker. <i class="em em---1"></i>
</div>
</div>
</div>
</div>
</div>
<!-- for navbar on screen >= lg -->
<nav class="navbar sticky-top navbar-expand-lg navbar-dark bg-dark navbar-fixed-top d-none d-lg-block mb-2">
<div class="container">
<a class="navbar-brand" href="/">{{ config('app.name') }}</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsMain" aria-controls="navbarsMain" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsMain">
<ul class="navbar-nav mr-auto">
<li class="{{Request::is('/') ? 'active' : ''}} nav-item">
<a class="nav-link" >AAAA <</a>
</li>
<li class="{{Request::is('sentiment') ? 'active' : ''}} nav-item">
<a class="nav-link" >BBBBB</a>
</li>
<li class="{{Request::is('exchanges') ? 'active' : ''}} nav-item">
<a class="nav-link" >CCCCC</a>
</li>
</ul>
</div>
</div>
</nav>
It sounds like that you have something else going on, on your site that is causing the FOUC - and that it doesn't have something to do with the styles. Your styles looks fine to me.
If it were the styles that were the problem, then it would be because the HTML was loaded before the stylesheet was loaded. So unless you have your stylesheet in the footer, then I don't think that's the problem.
My best guess is that you have some Javascript doing something to the content that is being yielded in the left-column, - and that that isn't completed when the page is loaded. If so, - then you could work your way around it by adding a placeholder in your JavaScript until the content is loaded, - or to setup a preloader on your entire site.
In order to prove/disprove this theory, you could remove all scripts from your site and just insert som standard HTML in the left-column (temporarily), to see if that is loaded without the FOUC.
Answer to your edit (and GIF)
Thanks for the elaboration.
The first thing I'm seeing is, that you have content for < lg content and >= lg content. I wouldn't do that. Just have it once and modify it, whenever the browser-size changes. It's easier to maintain and will get you less errors. Also (currently) you have data-target="#navbarsMain" twice.
But here's the code that is giving you problems:
<div class="container">
<div class="row justify-content-center" >
<div class="col-12">
#include('inc.ad_top') <-- when removed, FOUC disappears
</div>
<div class="col-12">
#include('inc.ad_block_message')
</div>
</div>
</div>
I don't know what is happening in #include('inc.ad_top'). But if that is pulling some content, upon the page is loading, then that can be the root of the problem, since that content isn't pulled until after that page is loaded. And in that case, it would just display a blank col-12-container (0px height).
To debug you can change this:
<div class="col-12">
#include('inc.ad_top') <-- when removed, FOUC disappears
</div>
to this:
<div class="col-12" style="min-width: 500px; width: 100%; min-height: 500px; height: auto; display: block; overflow: hidden;">
#include('inc.ad_top') <-- when removed, FOUC disappears
</div>
... and see what that will get you.
I have two bootstrap containers, one inside header navbar of the page, the second below navbar. Inside each container there is some text. I want text that is in the navbar container to be shifted to the left by 15 px for all responsive breakpoints.
I tried to do this using a negative margin. Here is my code:
<nav class="navbar px-0 navbar-light fixed-top bg-primary">
<div class="container"><div style="margin-left: -15px;">Text1</div></div>
</nav>
<div class="container" style="margin-top: 50px;">Text 2</div>
and JSFiddle example.
This method works, but it has a serious bug. When the width of the browser decreases, text in header navbar starts to go beyond the screen. Is there any way to avoid this? Of course it is clear that I set up margin using #media, but I think this is not quite the right way.
If you use the right way of nesting elements in Bootstrap you will end up with an aligned left side: .row will give you -15px to the left to counter the 15px left padding on .col-xx-xx. What you could do is to add 15px padding to other containers and let the navbar keep the normal bootstrap container max-width... That will keep the default 15px padding on the navbar on mobile/tablet etc.
<nav class="navbar px-0 navbar-light fixed-top bg-primary">
<div class="container">
<div class="row">
<div class="col-sm-12">Text</div>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="container-inner">Text</div>
</div>
</div>
</div>
Codepen Example
You can use navbar-fixed-top instead of fixed-top for navbar section. In Bootstrap 4 adjust margin-left by using default css class ml-1,ml-2,.. and padding pl-1,pl-2 as follows.
Ref Bootstrap 4 spacing
<nav class="navbar navbar-default navbar-fixed-top bg-primary">
<div class="container">
Text 1
</div>
</nav>
<div class="container">
<div class="ml-4 mr-4">
<p>Text 2</p>
</div>
</div>
Try your ans here: https://jsfiddle.net/testdesigner/aq9Laaew/193572/
I have an issue when viewing a site on mobile, where the fly out menu icon and main icon go missing off the screen. This may be due to incorrect input of bootstrap code but it's proving hard to fix.
Mobile site view
Bootstrap code for icons
<div class="container-fluid">
<!-- change the image in style.css to the class header .container-fluid [approximately row 50] -->
<div class="container">
<header id="home">
<!-- change the image in style.css to the class header .container-fluid [approximately row 50] -->
<div class="container">
<div class="row">
<div class="col-md-12 col-xs-12"></div>
<div class="col-md-1 col-md-offset-10 col-xs-2 text-center">
<img src="images/MJW Star3.png" alt="" class="img5"></span>
<div class="col-md-10 col-md-offset-8 col-xs-2 text-center">
<div class="menu-btn"><span class="hamburger">☰</span>
</div>
I have a navbar inside the tab-content that has pull-right bootstrap class ,we are rendering element js-property-panel based on user selection so when this element loads it is overlapping on navbar. So both are iniside cols 10. How can i set position of navbar using pull-right when js-property-panel loads it should moved to right ?
main.html
<div class="col-md-10" ng-class="{'col-md-12':isCollapsed,'col-md-10':!isCollapsed,'tabContentCollapse-padding':isCollapsed}">
<div class="tab-content">
<nav class="navbar navbar-default pull-right">
<div class="container-fluid">
//navbar stuff here
</div>
<!-- /.container-fluid -->
</nav>
<div role="tabpanel" class="active" id="tab">
<div>
<div id="home" class="fade in active">
<div class="modeler">
<div id="canvas" style="height:80vh;"></div>
<div id="js-properties-panel"></div>
</div>
</div>
</div>
</div>
</div>
</div>
Are you looking for a pure css solution? As this can be achieved with
javascript pretty easily.
Also here is a link of css tricks that might be useful to
introduce conditional styling using css.
Update:
Here is how far I could get to- please follow the fiddle here
<div class="col-md-10" ng-class="{'col-md-12':isCollapsed,'col-md-10':!isCollapsed,'tabContentCollapse-padding':isCollapsed}">
<div class="tab-content row">
<div class="col-md-6 col-md-push-6 navwrapper">
<nav class="navbar navbar-default">
<div class="container-fluid">
//navbar stuff here
</div>
<!-- /.container-fluid -->
</nav>
</div>
<div role="tabpanel" class="col-md-6 col-md-pull-6" id="tab">
<div>
<div id="home" class="fade in active">
<div class="modeler">
<div id="js-properties-panel" class="panel-contents">
sample content
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Observations:
What you are trying to achieve is controlling the style of an element
higher up the DOM tree using a state an element lower down the tree.
Neither those elements are direct parent-child nor are those siblings
so you could control using common class and may be adding a
:not(:empty) selector.
You could still use the column-ordering to a certain extend though
I have a Bootstrap 3.1.1 page with a fixed navbar and a sticky footer.
I need to show fullscreen (minus fixed navbar and sticky footer) images in a carousel. The cropping can be both from x and y, but the center of the image needs to be at the center of the viewport.
This is where I'm at now:
Bootply
Problem is I can't make the carousel appear. heght: 100% doesn't seem to work.
A CSS only solution is preferred, but I don't mind a little javascript though.
You can add the img-responsive class to your images, leaving your code like this:
<!-- Wrap all page content here -->
<div id="wrap">
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<!-- Begin page content -->
<div class="container-fluid">
<!-- Begin carousel -->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-pause="false">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="img-responsive" src="http://placehold.it/1600x1200/0000aa" alt="...">
</div>
<div class="item">
<img class="img-responsive" src="http://placehold.it/2592x1944/00aa00" alt="...">
</div>
<div class="item">
<img class="img-responsive" src="http://placehold.it/3264x2448/aa0000" alt="...">
</div>
</div>
</div>
</div>
</div>
<div id="footer">
<div class="container">
<p class="text-muted credit">Example courtesy Martin Bean and Ryan Fait.</p>
</div>
</div>
This will make your images behave just as you want, but with your approach, the fixed footer will leave some blank space. This depends on what you try to achieve, of course, but I think you would be better with a position:relative or position:absolute footer, otherwise you'll need to make some measurements with JS or jQuery.
Optionally, you can use vh length for everything and instead of img elements, make those images be the backgrounds for their respective item, so you can apply a background-size:cover property and be a happy camper
If you want no scroll you should use overflow: hidden but it is imposible that your image will be displayed without any crop because your image has a fixed size and there are lots of diferent devices with diferent view ports. It's just a matter of from what you want to crop. (width or height) If you want to crop from the width you should use height: 100% for that image and if you want to crop the width you should use the img-responsive class.
I guess for your case you should add the height of the image 100%, the overflow of the body hidden and center the image with margin: 0px auto;