as you can see on this jsfiddle, if you play with the window size, the lorem ipsum text sometimes goes outside the white container.
I can't figure out why, because when I look at the code, everything seems to be embedded within the main container so I would expect the text to adapt the fluidly adapt to the window size.
What is the issue?
Thanks,
<section>
<div class="container content">
<div class="row">
<div class="col-md-3 bordering">
<h2>Qui <b>sommes-nous?</b></h2>
<h3>Actifs depuis </h3></div>
<div class="col-md-9">
<div class="title-block">
<p>
Lorem ipsum dolor sit amet, connecteur adipiscin
<p>
etc.
It is because you have applied a fixed width to .container:
.container {
width: 1260px; /* remove or edit this line */
}
Related
I am super new to coding and web development and I am not sure how to solve my issue:
I am trying to add an image to the column that I created using bootstrap 4 grid system. However, as soon as I add the image, a horizontal scrollbar appears on the screen and I'm not sure why.
Here is a screenshot of what happens: https://gyazo.com/c383ecb9180181349363e0636047867c
<div class="container">
<div class="row">
<div class="col-6">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
<div class="col-6">
<img src="https://images.unsplash.com/photo-1585600270404-543d0eac85e1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3042&q=80">
</div>
</div>
My second issue is that although the horizontal scrollbar gets removed when I use the "img-fluid" class for my image, however when I change the container to container-fluid so that it covers the entire width of the screen and then use the class "px-0" for my container to remove the extra padding, I once again get horizontal scrollbars appearing on my screen.
<div class="container-fluid px-0">
<div class="row">
<div class="col-6">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
<div class="col-6">
<img class="img-fluid" src="https://images.unsplash.com/photo-1585600270404-543d0eac85e1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3042&q=80">
</div>
</div>
The root cause of the problem is due to no restriction on 'width' being applied to the image.
The image is very big and hence, it is causing the horizontal scroll bar to appear.
Bootstrap provides a class called 'img-fluid' to resolve this common issue.
The horizontal scroll bar can be avoided by specifying the image class of 'img-fluid', as shown below.
The second problem with the use of container-fluid px-0 can be fixed by specifying the px-lg-5 class instead of px-0.
(px-lg-5 works well for wide sections / outer-most divs)
Working example with 'img-fluid' and container-fluid px-lg-5 classes:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<title>Bootstrap - responsive image</title>
</head>
<body>
<div class="container-fluid px-lg-5">
<div class="row">
<div class="col-6">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
<div class="col-6">
<img class="img-fluid"
src="https://images.unsplash.com/photo-1585600270404-543d0eac85e1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3042&q=80">
</div>
</div>
</body>
</html>
Output:
More information:
https://getbootstrap.com/docs/4.0/content/images/
Either you can set overflow : hidden to the second column container if you want your page to not scroll, or you can set height and width of the image to avoid scrolling and to make the whole image visible.
<div class="col-6">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
<div class="col-6" style="overflow: hidden">
<img height="100px" width="100px" src="https://images.unsplash.com/photo-1585600270404-543d0eac85e1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3042&q=80" />
</div>
Learn more about overflow property at https://www.w3schools.com/css/css_overflow.asp and image attributes at https://www.w3schools.com/html/html_images.asp
To solve your second problem, just add the margin:0 to the <div class="row">
For the below image I need to always show the whole background image regardless of the desktop window size and always ensure that the text layout remains the same, ie, the button is always sitting at the bottom of the section and not have a big blue gap below it.
*Note my image is just an example, the white rectangle is really a picture of a product but I have removed it because I cannot release such photos.
How best can I achieve this? This modern web design of maintaining the same look across different desktop browser screens is really troubling me because the methods I have used mean the design is not consistent across different browser screens, ie, the white rectangle gets clipped at the bottom or the text content height is too small for the blue section height and we get a big blue gap below it.
My techniques I have tried:
Use a bootstrap 3.3 row (the website uses this version of the library no choice in this) with 2 columns with the dimensions 3/12 and 9/12. This works but sometimes I get a big blue gap under the text content (button) when I would really like it to spread out vertically evenly.
Make the section have a CSS background image. Set the image to 'cover'. This results in clipping of the bottom of the white rectangle in certain desktop window dimensions.
Any advice on how best to approach this design using CSS3, Bootstrap 3.3 or etc.?
.blue-section {
background-color: #1caaf2;
color: #fff;
padding-top: 10px;
padding-bottom: 10px;
}
.blue-section h1,
.blue-section h2,
.blue-section h3,
.blue-section h4,
.blue-section h5,
.blue-section p {
color: #fff;
}
.blue-bk {
background: url('https://i.stack.imgur.com/Sgm8G.png') !important;
-webkit-background-size: contain !important;
-moz-background-size: contain !important;
-o-background-size: contain !important;
background-size: 100% !important;
background-repeat: no-repeat !important;
width: 100%;
}
.banner-img {
height: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<section class="section-container blue-section">
<div class="container">
<div class="row">
<div class="col-xs-3">
<img class="img-responsive banner-img" src="https://i.stack.imgur.com/Sgm8G.png" />
</div>
<div class="col-xs-9 mht-db-header-information">
<h1 class=""><strong>Lorem ipsum Lorem ipsum Lorem ipsum </strong></h1>
<h3>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</h3>
<div class="text-center">
<a class="button-primary" href="">Button</a>
</div>
</div>
</div>
</div>
</section>
<section class="section-container blue-section blue-bk">
<div class="container">
<div class="row">
<div class="col-xs-3">
</div>
<div class="col-xs-9 mht-db-header-information">
<h1 class=""><strong>Lorem ipsum Lorem ipsum Lorem ipsum </strong></h1>
<h3>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</h3>
<div class="text-center">
<a class="button-primary" href="">Button</a>
</div>
</div>
</div>
</div>
</section>
All images:
White rectangle only (in production will be an image of a product):
Background image I use:
I used img-fluid class inside my img tag but my image is not fully responsive. It is responsive for smaller screen but becomes unresponsive after the screen is enlarged to a certain dimension.
I've read How to make an image responsive using bootstrap without having it take up the entire width of the division? and Bootstrap: img-responsive vs img-fluid but couldn't solve the issue.
Here's how I tried
HTML:
<!-- THE HEADER -->
<div class="container-fluid header">
AUST CSE
</div>
<!-- IMAGE JUST BELOW HEADER -->
<div class="wrapper" style="background: blue">
<img src="images2/banner.jpg" class="img-fluid">
</div>
CSS:
.wrapper {
width: 100%;
}
In smaller screens, the page looks like this:
however, in larger screen, the image don't occupy 100% of the space and looks like this:
I want the image to occupy 100% of the width and scale up its height, just like it does when the screen is smaller.
img-fluid uses max-width: 100%;. Once the containing element is the same size or larger than the image's width, it will stop resizing.
Two options:
1) Use an image with a resolution that is at least the widest width of your container element. If the width of your container element does not have a fixed top end (i.e. will always be 80% of viewport width), then pick a sufficiently large image so that it will look good on the majority of displays (lookup stats on most common browser resolutions).
#import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css' );
/* For demo purposes and is not required. */
.demo {
background-color: rebeccapurple;
}
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="demo">
<img class="img-fluid" src="https://via.placeholder.com/1000x1000">
</div>
</div>
<div class="col-md-8">
<p>
Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor.
Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor.
Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor.
</p>
</div>
</div>
2) Override .img-fluid so that the image will resize beyond native resolution. The drawback here is the image will get grainy. The smaller the native resolution, the more grainy it will become when scaled to large areas. You can see in my example that the text is quite fuzzy.
#import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css' );
/* For demo purposes and is not required. */
.demo {
background-color: rebeccapurple;
}
/* Will override all instances of .img-fluid. */
.img-fluid {
width: 100%;
}
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="demo">
<img class="img-fluid" src="https://via.placeholder.com/100x100">
</div>
</div>
<div class="col-md-8">
<p>
Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor.
Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor.
Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor.
</p>
</div>
</div>
</div>
I've also included a scoping example below which allows you to override only specific images to extend past their native resolution.
#import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css' );
/* For demo purposes and is not required. */
.demo {
background-color: rebeccapurple;
}
/* Scoped so that we can target specific images. */
.img-fluid.img-full-width {
width: 100%;
}
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="demo">
<img class="img-fluid img-full-width" src="https://via.placeholder.com/100x100">
</div>
</div>
<div class="col-md-8">
<div class="demo">
<img class="img-fluid" src="https://via.placeholder.com/100x100">
</div>
</div>
</div>
</div>
If you want the image to span all the way across the width of the page on larger screens, then you need to make sure that your image width is just as large as the screen width.
Based off of your issue, it looks like your dimensions are not large enough. The img-fluid class will resize your image, but only to the max of its dimensions.
There are 1 of 2 things you can do to fix it.
(The preferred method) Pick an image that has the correct width for the max size screen you want. (Most of the time, that would be 1920px)
You can add width: 100% to your image so that it will span the full width of your page. But, if the width of your image is smaller than your screen, then the image will not be as clear, which is why it's best to use images that are the correct dimensions.
Example:
Here is an image that has smaller dimensions (your issue): JSFiddle
.container {
border: 2px solid red;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<h2>Image</h2>
<p>The .img-fluid class makes the image scale nicely to the parent element (resize the browser window to see the effect):</p>
<img class="img-fluid" src="https://cdn-static.denofgeek.com/sites/denofgeek/files/styles/main_wide/public/2015/11/main_0.jpg?itok=k1tyTR75" alt="HL2">
</div>
Here is an image that has larger dimensions (1920px): JSFiddle
.container {
border: 2px solid red;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<h2>Image</h2>
<p>The .img-fluid class makes the image scale nicely to the parent element (resize the browser window to see the effect):</p>
<img class="img-fluid" src="https://s.aolcdn.com/hss/storage/midas/f8eff2a90708d58814bb4adc93634cbb/205752037/half-life-2-15622-1920x1080.jpg" alt="HL2">
</div>
I try to understand the following layout situation: i got a floating div with an undefined width that acts as a container. inside i got a left floating header. the there is unfloated div that wraps another left floated div. the unfloated div is for hiding content with a small viewport but that does not matter for the observation.
you can see the layout structure here: jsfiddle before
<div class="container" style="float: left">
<div style="float: left">HEADER</div>
<div style="border: 1px solid green;">
<div style="float: left">
<div class="element">lorem ipsum dolor sit amet. </div>
<div class="element">lorem ipsum dolor sit amet. lorem ipsum dolor sit amet.</div>
<div class="element">lorem ipsum dolor sit amet. </div>
</div>
</div>
</div>
in this fiddle, when i add Text into the unfloated div, the whole container extends its width. see here: jsfiddle with text.
<div class="container" style="float: left">
<div style="float: left">HEADER</div>
<div style="border: 1px solid green;">TEXT
<div style="float: left">
<div class="element">lorem ipsum dolor sit amet. </div>
<div class="element">lorem ipsum dolor sit amet. lorem ipsum dolor sit amet.</div>
<div class="element">lorem ipsum dolor sit amet. </div>
</div>
</div>
</div>
why is that? it seems like the browser is measuring the whole width in one line and then drops the floated div with the 3 elements one line below? this is another issue i don't understand but this is already discussed here: Right floated container results in line break.
why is the containing div becoming wider when there is already enough space for the text to float next to the header?
edit1: it seems that in ie this works without wrapping the float to another line. is this a browser issue in chrome/ff?
edit2: i think all the problems can be summarized by not establishing a consistent set of block formatting contexts. an unfloated div within a floated div with floated children seems to be "undefined" and a situation that browsers interpret differently. solution is to establish consistent BFCs.
Thanks for your help
Patrick
It seems like you may not have a solid feel for exactly how floats work, and how adjacent floated, and unfloated, content acts around them (dont worry, it can be tricky to grasp and takes time).
If Im right in my understanding of the issue, you want to establish a correct block formatting context for the div with the green border, this can be established by adding overflow:auto (amongst other approaches)
A block formatting context is a part of a visual CSS rendering of a
Web page. It is the region in which the layout of block boxes occurs
and in which floats interact with each other.
You can generally see when you may need to establish a block formatting context when working with floats, as the content appears collapsed. You can see this in your original fiddle, in that the div with the green border does not extend around the boundaries of its floated contents. Adding overflow:auto restores the anticipated behavior.
Demo Fiddle
I try to load specific location in same page. so I use this code and its work fine.
Here the JSFIDDLE.
<div class="header">This is Header</div>
<div id="nav" class="clearfix">
1
2
3
4
</div>
<div class="section">
<h1><a name="headline1">Headline One</a></h1>
<p>Lorem ipsum dolor sit amet...</p>
</div>
<div class="section">
<h1><a name="headline2">Headline Two</a></h1>
<p>Lorem ipsum dolor sit amet...</p>
</div>
<div class="section">
<h1><a name="headline3">Headline Three</a></h1>
<p>Lorem ipsum dolor sit amet...</p>
</div>
<div class="section">
<h1><a name="headline4">Headline Four</a></h1>
<p>Lorem ipsum dolor sit amet...</p>
</div>
But the problem is, the header is fixed on position top. When I click the link 1, the Headline one is goes back on header. So the h1 content is not show.
Please visit this Fiddle. You can understand what I am try to say. Thank you for your help.
Simple way: Use padding on the "name" element, to counter the header.
See http://jsfiddle.net/sAdK5/3/
.section h1 a {
display:block;
padding-top:100px;
}
A more complicated way: put all content inside a div container and create inline scrolling with CSS.
You could aslo use jQuery to add the extra scrolling.
See: http://jsfiddle.net/sAdK5/11/
What we do is, create the scrollbar inside the #content area, and measure the height of the window, minus the header - and call it on every window resize.
$(document).ready(function(){
resizeContent();
//attach on resize event
$(window).resize(function() {
resizeContent();
});
});
function resizeContent()
{
//#content height equals window height minus .header height
$('#content').css('height', $(window).height() - $('.header').height());
}