When shrinking the screen, these images are overlapping each other. I have made no changes to the css for container-fluid or row.
<div class="container-fluid bg-grey">
<div class="row center">
<div class="col-sm-4">
<img src="http://www.fpcbp.com/wp-content/gallery/tkGallery/OYIaJ1KK.png" width="425" height="319" />
</div>
<div class="col-sm-4">
<img src="http://www.fpcbp.com/wp-content/gallery/tkGallery/OYIaJ1KK.png" width="425" height="319" />
</div>
<div class="col-sm-4">
<img src="http://www.fpcbp.com/wp-content/gallery/tkGallery/OYIaJ1KK.png" width="425" height="319" />
</div>
</div>
</div>
I would like the images to just stack on top of each other, instead of overlapping.
Thanks
The columns will overlap because the <img> elements have a fixed width value. col-*-* have a set percentage width and as soon as that becomes smaller than the width set on the images, overlapping will occur.
To make images responsive you can remove the width property and use the class .img-responsive so that the <img> doesn't exceed the width of the column. It utilizes max-width: 100%.
<img class="img-responsive" src="..." />
You should defined your columns for narrower screen, e.g. col-xs-12. It means that on screens smaller than 768px each column take all the available space, so they stack.
In your code you have 3 columns in a single row and a single column take 33.33% of available space. What's more, you have declared fixed sized of your images. In order to make them responsive, you could use Bootstrap img-responsive class. Notice though, that you must remove earlier fixed height and width. Otherwise images won't scale.
If any of the two valid answers above and below did not work for you, try to add the css attributes attaching your own class to the images:
.myclass{max-width: 100%; height: auto;}
<div class="container-fluid bg-grey">
<div class="row center">
<div class="col-sm-4 col-md-4 col-xs-12">
<img class="img-responsive" src="http://www.fpcbp.com/wp-content/gallery/tkGallery/OYIaJ1KK.png" width="425" height="319" />
</div>
<div class="col-sm-4 col-md-4 col-xs-12">
<img class="img-responsive" src="http://www.fpcbp.com/wp-content/gallery/tkGallery/OYIaJ1KK.png" width="425" height="319" />
</div>
<div class="col-sm-4 col-md-4 col-xs-12">
<img class="img-responsive" src="http://www.fpcbp.com/wp-content/gallery/tkGallery/OYIaJ1KK.png" width="425" height="319" />
</div>
</div>
</div>
Related
I have this setup in a section, but Bootstrap break the 3rd column into a new line, why?
<div class="row mt-3">
<div class="col-lg-6" id="landscapePreviewColumn">
<img id="landingImageLandscape" src="https://pic.speechifai.tech/1000x1000/F8619E40-A392-4FE1-99BC-8FCCDF81BFA7.jpg">
<img id="landingImageLandscapeOverlay" src="/img/landing_preview/Desktop2.png">
</div>
<div class="col-lg-3 pl-3" id="portraitPreviewColumn" style="padding-left:0">
<img id="landingImagePortrait" src="https://pic.speechifai.tech/57F7B4C0-9A38-4184-874B-707E97EA3977.jpg">
<img id="landingImagePortraitOverlay" src="/img/landing_preview/Mobile2.png">
</div>
<div class="col-lg-3 pl-3" id="socialPreviewColumn" style="padding-left:0">
<img id="landingImageSocial" src="https://pic.speechifai.tech/2FF280BE-DCB3-4235-9B2C-87558D4D26F1.jpg">
<img id="landingImageSocialOverlay" src="/img/landing_preview/Mobile2.png">
</div>
</div>
Looks like this:
I removed padding left, but has the same phenomenon.
<div class="row mt-3">
<div class="col-lg-6" id="landscapePreviewColumn">
<img id="landingImageLandscape" src="https://pic.speechifai.tech/1000x1000/F8619E40-A392-4FE1-99BC-8FCCDF81BFA7.jpg">
<img id="landingImageLandscapeOverlay" src="/img/landing_preview/Desktop2.png">
</div>
<div class="col-lg-3" id="portraitPreviewColumn">
<img id="landingImagePortrait" src="https://pic.speechifai.tech/57F7B4C0-9A38-4184-874B-707E97EA3977.jpg">
<img id="landingImagePortraitOverlay" src="/img/landing_preview/Mobile2.png">
</div>
<div class="col-lg-3" id="socialPreviewColumn">
<img id="landingImageSocial" src="https://pic.speechifai.tech/2FF280BE-DCB3-4235-9B2C-87558D4D26F1.jpg">
<img id="landingImageSocialOverlay" src="/img/landing_preview/Mobile2.png">
</div>
</div>
Try to add
class="img-fluid"
to the images.
The documentation says:
Responsive images Images in Bootstrap are made responsive with
.img-fluid. max-width: 100%; and height: auto; are applied to the
image so that it scales with the parent element.
Source: https://getbootstrap.com/docs/4.0/content/images/
I think, your screen is too small
https://getbootstrap.com/docs/4.6/layout/grid/#grid-options
try col-6 col-3
Problem was that the parent container had padding. I set it zero, and then all the 3 item got into one line.
I am trying to create a Bootstrap grid layout with different images. Everything is fine except when viewing on different mobile devices in the mobile inspector on Chrome. Below is a picture of what it looks like in the inspector. The second image is slightly off-centered from the former image.
<section class="container" id="main">
<section class="center-block text-center">
<h4>Random Column Number 1</h4>
<img src="https://www.apple.com/ac/structured-data/images/open_graph_logo.png?201701231950" width="500px" height="262px"/>
</section>
<section class="col-lg-6 center-block text-center">
<h4>Random Column Number 2</h4>
<img src="http://www.appliste.cz/wp-content/uploads/2016/05/Apple_1998.png" width="500px" height="262px" />
</section>
<section class="col-lg-6 center-block text-center">
<h4>Random Column Number 3</h4>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/84/Apple_Computer_Logo_rainbow.svg/931px-Apple_Computer_Logo_rainbow.svg.png" width="500px" height="262px" />
</section>
</section>
Here is the JSFiddle. The problem is that I am trying to off-set the second section as a "col-lg-6 center-block text-center" class. If I remove the col-lg-6 it works just fine. But I want to be able to stack two images next to each other. Is there any way to correct this so that it is centered like the first image? The JSFiddle contains three images.
This is what it looks like at full screen.
The images are not the correct aspect ratio because of the force width and height set. Perhaps just set a max-height so they image width can change responsively.
Also, center-block should be used on the images instead of the col-
<section class="container" id="main">
<section class="center-block text-center">
<h4>Random Column Number 1</h4>
<img src="https://www.apple.com/ac/structured-data/images/open_graph_logo.png?201701231950" class="center-block img-responsive" />
</section>
<section class="col-lg-6 text-center">
<h4>Random Column Number 2</h4>
<img src="http://www.appliste.cz/wp-content/uploads/2016/05/Apple_1998.png" class="center-block img-responsive" />
</section>
<section class="col-lg-6 center-block text-center">
<h4>Random Column Number 3</h4>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/84/Apple_Computer_Logo_rainbow.svg/931px-Apple_Computer_Logo_rainbow.svg.png" class="center-block img-responsive" />
</section>
</section>
http://www.codeply.com/go/JBhTWnvfv5
Just add a media query when on mobile devices.
It would look something like this:
#media screen and (max-width: 720px) {
.center-block {
padding:0 !important;
}
}
Fiddle
<div class="col-sm-3">....</div>
....
use this code in your div where you are placing your grid and and div with these classes as i mentioned above. It works
I have a div that lists screenshots for my software that I'm displaying on a website. When the screen is big the images align properly.
The problem is when I view it on the phone or change the window size on the computer to collapse the items, there's empty space where it's not being aligned properly for some reason. See Picture below.
Here is the Code on the index page. In my opinion, everything should work fine without adjustments.
Things I've tried:
-Removing the container and row classes.
-Changing the width of the images all the way down to 80%, which even 100% SHOULD work
-Adding class="img-responsive" as seen in another thread.
-Removing margins and padding for the divs the images are in.
<!-- Screenshots -->
<div id="screenshots">
<div class="container">
<br>
<div class="row text-center"> <!-- Screenshot DIV -->
<h2>Screenshots<h2>
<div class="col-md-2 col-xs-6">
<img src="images/screenshots/dashboard.png" alt="Dashboard SS" class="img-responsive" width="100%" />
</div>
<div class="col-md-2 col-xs-6">
<img src="images/screenshots/lotmanager.png" alt="Lot Manager SS" class="img-responsive" width="100%" />
</div>
<div class="col-md-2 col-xs-6">
<img src="images/screenshots/register.png" alt="Register SS" class="img-responsive" width="100%" />
</div>
<div class="col-md-2 col-xs-6">
<img src="images/screenshots/sell.png" alt="Auction SS" class="img-responsive" width="100%" />
</div>
<div class="col-md-2 col-xs-6">
<img src="images/screenshots/checkout.png" alt="Checkout SS" class="img-responsive" width="100%"/>
</div>
<div class="col-md-2 col-xs-6">
<img src="images/screenshots/samplereceipt.png" alt="Receipt SS" class="img-responsive" width="100%" />
</div>
</div><!-- /.Screenshot DIV -->
<br>
</div><!-- /.container -->
</div><!-- /.screenshots -->
Any help would be appreciated.
One Error in Your Code, Please check after correct /h2
<h2>Screenshots</h2>
It is due to different height of the images. What can u do Set the parent div of the img to the maximum height from the group of the images?
var maxheight;
$('#screenshots .container > div > img').each(function(){
var currHeight = $(this).height();
if(maxHeight < currHeight) {
maxHeight = currHeight;
}
});
if(window.width() < 768) {
$('#screenshots .container > div').hieght(maxHeight);
}
I´m using the bootstrap grid system with full-width and I want to have a section, where I have four img-elements with equal margin and the margin should be responsive. The section is in the center of the page.
I could say for every img-element margin-right: 20px or something like this, but can I get this also responsive?
<div class="row" id="content_services">
<div class="col-md-offset-2 col-md-8">
<section id="services_section">
<img src="pictures/test.jpg" alt="Test" class="img-responsive">
<img src="pictures/test.jpg" alt="Test" class="img-responsive">
<img src="pictures/test.jpg" alt="Test" class="img-responsive">
<img src="pictures/test.jpg" alt="Test" class="img-responsive">
</section>
</div>
</div><!-- END ROW CONTENT_SERVICES -->
The stylesheet:
#services_section{
}
#services_section img{
height: 275px;
width: 275px;
display: inline;
}
if its only ever going to be 4 elements - use a nested column structure. Each image will display across the page in a single row across the screen on medium and large viewports, will display in pairs on small viewports and will stack vertically on small viewports. You will still need to style the images to display in the center of each (either with a text-center class on the parent div as I have done or via css on each img). If you need to alter the number of images - remember that the magic number is 12 - each column can be divided into 12 columns so you can alter the sizings for different numbers of image elements.
Also just note that a section semantically requires a heading (h1 - h6 - which defines its title ) within its structure to be valid html5. Hope this helps, Gavgrif
<div class="row" id="content_services">
<div class="col-md-offset-2 col-md-8 text-center">
<section id="services_section">
<div class="col-md-3 col-sm-6">
<img src="pictures/test.jpg" alt="Test" class="img-responsive">
</div>
<div class="col-md-3 col-sm-6">
<img src="pictures/test.jpg" alt="Test" class="img-responsive">
</div>
<div class="col-md-3 col-sm-6">
<img src="pictures/test.jpg" alt="Test" class="img-responsive">
</div>
<div class="col-md-3 col-sm-6">
<img src="pictures/test.jpg" alt="Test" class="img-responsive">
</div>
</section>
</div>
</div><!-- END ROW CONTENT_SERVICES -->
I want to stack four images which are next to each other at desktop size, to be above each other in 2 columns (1 and 2 3 and 4) in mobile screen size, using the bootstrap 12 column grid. The original 4 imgs are similar but are not exactly the same in size. The heights vary between 40 and 57 px and the widths are between 176 and 220 px. When displayed non-responsive they come out the way they should in desktop size, next to each other. However, when I make them responsive by adding width=100% in the html, the last one comes out magnified compared to the rest, both in desktop and in mobile size, and the first one takes up more space than the rest if I inspect them. The pics do line up in 2 columns in mobile size, but the last pic is not in line with the third one but displaced a paragraph below. If I adjust the size of the last pic to 85% then the sizes are okay, but issue with the pic being out of position still remains.
Here is the code:
<section id="section">
<div class = "container">
<div class = "row">
<div class="col-md-3 col-sm-3 col-xs-6 col text-center">
<img src = "img/1.png" style='width:100%;' alt="Null" />
</div>
<div class="col-md-3 col-sm-3 col-xs-6 text-center">
<img src = "img/2.png" style='width:100%;' alt="Null" />
</div>
<div class="col-md-3 col-sm-3 col-xs-6 text-center">
<img src = "img/3.png" style='width:100%;' alt="Null" />
</div>
<div class="col-md-3 col-sm-3 col-xs-6 text-center">
<img src = "img/4.png" style='width:100%;' alt="Null" />
</div>
</div>
</div>
</section>
It depends by use of float on items of different height.
You have 2 options, one adding a special div provided by Bootstrap, that is visible only in mobile breakpoints:
<div class="col-md-3 col-sm-3 col-xs-6 text-center">
<img src = "img/2.png" style='width:100%;' alt="Null" />
</div>
<div class="clearfix visible-xs"></div>
<div class="col-md-3 col-sm-3 col-xs-6 text-center">
<img src = "img/3.png" style='width:100%;' alt="Null" />
</div>
<div class="col-md-3 col-sm-3 col-xs-6 text-center">
<img src = "img/4.png" style='width:100%;' alt="Null" />
</div>
</div>
</div>
You have to add it after each two elements.
Another solution is to set auto-clear with only css (you have to manually set the right media query value) and the idea is to clear:left every 3rd element:
#media screen and (max-width: 720px) {
.col-xs-6:nth-of-type(2n+1) {
clear:left;
}
}