Was wondering if there was anyone that could help me with an issue I'm having with the responsiveness of a page that I've created for a client.
Basically I need this design to fully fit the screen (height and width) on all desktop screen sizes without a scroll bar appearing; I know I'm on the right path but cannot find the solution
Any suggestions please
Thank you
You can use bootstrap col-xs
Example:
<div class="row">
<div class="col-xs-3">
<img src="https://dummyimage.com/600x400/000/fff" alt="" width="100%">
</div>
<div class="col-xs-3">
<img src="https://dummyimage.com/600x400/000/fff" alt="" width="100%">
</div>
<div class="col-xs-3">
<img src="https://dummyimage.com/600x400/000/fff" alt="" width="100%">
</div>
<div class="col-xs-3">
<img src="https://dummyimage.com/600x400/000/fff" alt="" width="100%">
</div>
</div>
DEMO http://jsbin.com/pumiteqoji/1/edit?html,css,output
Related
This question already has answers here:
CSS-only masonry layout
(4 answers)
Closed 3 years ago.
I wrote this code for insert image in order to create a grid full of photos:
<section class="gallery-section">
<div class="container grid-custom" style="padding-top: 50px;">
<div class="row">
<div style="padding: 0px;" class="text-center col-md-4 gallery-image">
<img src="./images/cover.jpg" alt="" class="img-fluid">
</div>
<div style="padding: 0px;" class="my-auto text-center col-md-4 gallery-image">
<img src="./images/passero.jpg" alt="" class="img-fluid">
</div>
<div style="padding: 0px;" class="text-center col-md-4 gallery-image">
<img src="./images/cigno.JPG" alt="" class="img-fluid">
</div>
</div>
<div class="row">
<div style="padding: 0px;" class="text-center col-md-4 gallery-image">
<img src="./images/pic1.jpg" alt="" class="img-fluid">
</div>
<div style="padding: 0px;" class="text-center col-md-4 gallery-image">
<img src="./images/fiore.JPG" alt="" class="img-fluid">
</div>
<div style="padding: 0px;" class="text-center col-md-4 gallery-image">
<img src="./images/sfondo7.jpg" alt="" class="img-fluid">
</div>
</div>
</div>
</section>
But I get this result:
What should I do instead to get a result like this?
You are placing 3 images per div.row, which results in this layout:
As you can see, the div.row elements are stacked, and each div.row is as high as its highest image, creating gaps for the remaining space in each row.
In summary, you have divided the grid first by rows, and then by columns.
What you need is a masonry grid. As opposite to your approach, this grid is divided first by columns, and then by rows or images.
The main concept behind a masonry grid resides in an approach like this:
<!-- Left column -->
<div class="col-md-4">
<img src="" alt="Top image">
<img src="" alt="Middle image">
<img src="" alt="Bottom image">
</div>
<!-- Center column -->
<div class="col-md-4">
<img src="" alt="Top image">
<img src="" alt="Middle image">
<img src="" alt="Bottom image">
</div>
<!-- Right column -->
<div class="col-md-4">
<img src="" alt="Top image">
<img src="" alt="Middle image">
<img src="" alt="Bottom image">
</div>
What you are looking for is a Masonry Layout.
There are a lot of websites that give nice tutorials. Here for instance I would refer to https://css-tricks.com/piecing-together-approaches-for-a-css-masonry-layout/
I want to design like this in bootstrap css , picture
What i have tried is
<div class="row">
<div class="col-md-3">
<img class="img-responsive" src="img1.jpg">
</div>
<div class="col-md-6">
<img class="img-responsive" src="img3.jpg">
</div>
<div class="col-md-3">
<img class="img-responsive" src="img5.jpg">
</div>
<div class="col-md-3">
<img class="img-responsive" src="img2.jpg">
</div>
<div class="col-md-6">
<img class="img-responsive" src="img4.jpg">
</div>
<div class="col-md-3">
<img class="img-responsive" src="img6.jpg">
</div>
</div>
The height of images img1.jpg,img4.jpg,img5.jpg need to increase as shown in image attcahed,
Is there any Experts in CSS?
Add the .img-fluid class to each of your images so they scale with the parent div's. That should work.
https://getbootstrap.com/docs/4.0/content/images/#responsive-images
You can achieve the desired layout with modification on your html code. Try this code.
<div class="row">
<div class="col-md-3">
<img class="img-responsive" src="img1.jpg">
<br>
<img class="img-responsive" src="img2.jpg">
</div>
<div class="col-md-6">
<img class="img-responsive" src="img3.jpg">
<br>
<img class="img-responsive" src="img4.jpg">
</div>
<div class="col-md-3">
<img class="img-responsive" src="img5.jpg">
<br>
<img class="img-responsive" src="img6.jpg">
</div>
</div>
I'm using Bootstrap thumbnails with SVG that I got from Wikipedia but for some reason the SVG are all different sizes so it causes the thumbnail panels to not align.
Using what method can I make the thumbnail images the same height so that the thumbnail panels align?
Code:
<div class="row">
<div class="col-md-3">
<div class="thumbnail">
<img src="Flag_of_England.svg" style="width: 100%;" alt="England Chat">
<div class="caption">
<h3>England Chat</h3>
<p>...</p>
<p>Chat</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="Flag_of_Ireland.svg" style="width: 100%;" alt="Ireland Chat">
<div class="caption">
<h3>Ireland Chat</h3>
<p>...</p>
<p>Chat</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="Flag_of_Scotland.svg" style="width: 100%;" alt="Scotland Chat">
<div class="caption">
<h3>Scotland Chat</h3>
<p>...</p>
<p>Chat</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="Flag_of_Wales.svg" style="width: 100%;" alt="Wales Chat">
<div class="caption">
<h3>Wales Chat</h3>
<p>...</p>
<p>Chat</p>
</div>
</div>
</div>
</div>
Screenshot:
It looks more like you'd need to adjust the height of images to align them, but it would have to be a fixed number which probably isn't ideal. You could made 2 rows, one for images and one for text, and as long as each row contained 4 rows with class="col-md-3" the content would all align vertically, but not sure there's another way around it
I am trying to display 3 images in a row with a title, some text underneath the title and a button. I have tried doing this in bootstrap only to get the text moving all over the place. This seems like the only way I could get the text to stay put, but now as you can see my images are stacked on top of each other rather than next to each other. Any help would be appreciated!
<section class="part2">
<div class="container">
<div class="row">
<div class="text-center">
<img alt="" class="resize-image" id="image1" src="/wp-content/themes/creativeforces/images/kid2.jpg">
<p>Teach</p>
<img alt="" class="resize-image" id="image2" src="/wp-content/themes/creativeforces/images/kid2.jpg">
<p>Read</p>
<img alt="" class="resize-image" id="image3" src="/wp-content/themes/creativeforces/images/kid2.jpg">
<p>Play</p>
</div>
</div>
</div>
this is what it looks like now
i am trying to get it to look something like this
You will need to add grids to your rows. This should work
<section class="part2">
<div class="container">
<div class="row">
<div class="col-md-4">
<img alt="" class="resize-image center-block" id="image1" src="/wp-content/themes/creativeforces/images/kid2.jpg" />
<p class="text-center">Teach</p></div>
<div class="col-md-4"><img alt="" class="resize-image center-block" id="image2" src="/wp-content/themes/creativeforces/images/kid2.jpg" />
<p class="text-center">Read</p></div>
<div class="col-md-4"><img alt="" class="resize-image center-block" id="image3" src="/wp-content/themes/creativeforces/images/kid2.jpg" />
<p class="text-center">Play</p></div>
</div>
</div>
</section>
Please use this example. You need to use bootstrap grid classes like "col-md-x" where x is number from 1 to 12.
<section class="part2">
<div class="container">
<div class="row">
<div class="col-md-4 text-center">
<img alt="" class="resize-image" id="image2" src="/wp-content/themes/creativeforces/images/kid2.jpg">
<p>Read</p>
</div>
<div class="col-md-4 text-center">
<img alt="" class="resize-image" id="image1" src="/wp-content/themes/creativeforces/images/kid2.jpg">
<p>Teach</p>
</div>
<div class="col-md-4 text-center">
<img alt="" class="resize-image" id="image3" src="/wp-content/themes/creativeforces/images/kid2.jpg">
<p>Play</p>
</div>
</div>
I'm trying to create a responsive row that, when displayed on an iPad, the 3 images go across the screen like on desktop. Currently they are behaving like they are on mobile and expanding vertically, not horizontally.
The images are the 3 product range images on the website: http://dekatest.neto.com.au/
<div class="container" style="text-align:center;">
<div class="row"><img alt="" src="/assets/images/MEDICAL-RANGE.jpg" style="max-width:100%;" /><img alt="" src="/assets/images/SPROTS-RANGE.jpg" style="max-width:100%;" /><img alt="" src="/assets/images/WELLBEING-RANGE.jpg" style="max-width:100%;" /></div>
</div>
If you are using Bootstrap try something like this
<div class="container text-center">
<div class="row">
<div class="col-sm-4">
<img alt="" src="/assets/images/MEDICAL-RANGE.jpg" />
</div>
<div class="col-sm-4">
<img alt="" src="/assets/images/SPROTS-RANGE.jpg" />
</div>
<div class="col-sm-4">
<img alt="" src="/assets/images/WELLBEING-RANGE.jpg" />
</div>
</div>
</div
and with CSS add the properties and styles to your tags
img { max-width: 100%; }
Note: you should change the value of col-sm-* depending on what you are trying to do.
if you are only using row just because of that you don't need padding between images. So simple is that make separate class for controlling padding of col-sm. You should have to use col-* inside row then it will be work fine.
CSS
.no-p{
padding-left:0px;
paddding-right:0px;
}
HTML
<div class="container text-center">
<div class="row">
<div class="col-xs-4 no-p">
<img class="img-responsive" alt="" src="https://placeholdit.imgix.net/~text?txtsize=47&txt=500%C3%97500&w=500&h=500" />
</div>
<div class="col-xs-4 no-p">
<img class="img-responsive" alt="" src="https://placeholdit.imgix.net/~text?txtsize=47&txt=500%C3%97500&w=500&h=500" />
</div>
<div class="col-xs-4 no-p">
<img class="img-responsive" alt="" src="https://placeholdit.imgix.net/~text?txtsize=47&txt=500%C3%97500&w=500&h=500" />
</div>
</div>
</div>
View on JsFiddle: https://jsfiddle.net/L2y3ybff/