I have this template that I use to display product in a "grid" layout:
<div id="cols3-top"></div>
<div id="cols3" class="box" data-field="products">
<div data-field="product" class="col">
<h3>Sample Product</h3>
<p class="nom t-center"><img src="tmp/200x140.gif" alt="" data-field="imageurl"/></p>
<div class="col-text">
<p data-field="content">Product information</p>
<ul data-field="features" class="ul-01"></ul>
</div> <!-- /col-text -->
<div class="col-more"><a href="#">
<img src="design/cols3-more.gif" alt="" data-field="morebutton"/></a>
</div>
</div>
</div> <!-- /cols3 -->
<div id="cols3-bottom"></div>
However this is not optimized, since inf the image img size is not the same it would break the "grid" layout. How to optimize this layout such that it would "auto-crop" images to specific width and height?
Make sure your images don't get larger than the cols they are in. For example:
#cols3 img{
width:300px; /* width of #cols3 */
height:auto;
}
Most probably you can also use 100% instead of 300px
Related
I am working on a Bootstrap 3 grid (unfortunately, the CMS is not allowing me to use Bootstrap 4). At the moment I cannot link to the page, so maybe this question is too hard to answer.
Here is how the row containing 5 columns is looking in the CMS:
The max-width is 1200px.
The problem is that every time I add a column containing an image, the image height is not the same. In this example I set a height on 255px on all images, but the image in the first column is much taller than the others.
When I enter the code in a JSfiddle it is looking normal
See jsfiddle here
So it must be something in the CMS there is doing it? Is there some kind of clue what I could look after?
Best regards
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
.padding-y {
padding: 20px;
background-color: #fff;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="section padding-y">
<div class="row">
<div class="col-sm-4">
<img src="http://placehold.it/348x255">
</div>
<div class="col-sm-2">
<img src="http://placehold.it/233x255">
</div>
<div class="col-sm-2">
<img src="http://placehold.it/233x255">
</div>
<div class="col-sm-2">
<img src="http://placehold.it/233x255">
</div>
<div class="col-sm-2">
<img src="http://placehold.it/233x255">
</div>
</div>
</div>
Step 1. Let's reproduce the problem
We don't need the bootstrap-theme.min.css. This file uses for the decoration only. First of all wee need bootstrap.min.css.
The 3.0.0 version is too old. Let'use the 3.4.1. instead. It's the latest Bootstrap 3 version.
Bootstrap assumes the row is inside the container. Sometimes the CMS has its own containers, and then you can get by with them, but to reproduce the problem, we need the correct code with the container.
Looking at your screenshot, I dare to assume that something on your site adds the max-width: 100%; restriction to all images. This is a fairly common solution for different themes.
I removed the block with the section padding-y classes, because the problem was reproduced without it.
So we get an example of a code that reproduces your screenshot.
img {
max-width: 100%;
}
<div class="container">
<div class="row">
<div class="col-sm-4">
<img src="https://via.placeholder.com/348x255/69c/fff">
</div>
<div class="col-sm-2">
<img src="https://via.placeholder.com/233x255/c69/fff">
</div>
<div class="col-sm-2">
<img src="https://via.placeholder.com/233x255/c69/fff">
</div>
<div class="col-sm-2">
<img src="https://via.placeholder.com/233x255/c69/fff">
</div>
<div class="col-sm-2">
<img src="https://via.placeholder.com/233x255/c69/fff">
</div>
</div>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
Step 2. What's happened
4 small images are wider than their columns. With a total content width of 1200 pixels, a column in one sixth of the width is 200 pixels. In addition, each column also has a horizontal padding of 15 pixels. There are 170 pixels left for the 233-pixel wide image.
And something adds a limit for the maximum width of images. Because of this, these images become smaller and their height becomes smaller too.
Step 3. What can be done
Since we do not know your layouts for screens of different widths, I can only fantasize.
Suppose you want to put 5 pictures of different sizes in one line on the desktop so that their heights coincide.
Variant with backgrounds
For example you can replace the images with blocks and use the images as a background. Then the height can be set in the CSS, the gaps between the pictures will be the same, but the visible part of the pictures can decrease.
.image-box {
background-repeat: no-repeat;
height: 255px;
}
#media (min-width: 768px) {
.image-box {
background-position: center;
background-size: cover;
}
}
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="image-box" style="background-image:url(https://via.placeholder.com/348x255/69c/fff)"></div>
</div>
<div class="col-sm-2">
<div class="image-box" style="background-image:url(https://via.placeholder.com/233x255/c69/fff)"></div>
</div>
<div class="col-sm-2">
<div class="image-box" style="background-image:url(https://via.placeholder.com/233x255/c69/fff)"></div>
</div>
<div class="col-sm-2">
<div class="image-box" style="background-image:url(https://via.placeholder.com/233x255/c69/fff)"></div>
</div>
<div class="col-sm-2">
<div class="image-box" style="background-image:url(https://via.placeholder.com/233x255/c69/fff)"></div>
</div>
</div>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
Variant with flexbox
You can also make Bootstrap 3 columns behave like a flexbox. This solution is suitable if the sizes of the images are known in advance and you can calculate which part of the row each of them occupies.
In the comments you have wrote that you wish to stretch the images on mobile. So I use this info in the new solution.
.row-of-images img {
width: 100%;
}
#media (min-width: 768px) {
.row-of-images {
display: flex;
}
.row-of-images > div {
box-sizing: content-box;
/* images will be resized taking into account the padding of the columns */
flex: 1 1 18.203125%;
/* 18.203125% = 100% * 255px / (348px + 4 * 255px) */
}
.row-of-images > div:first-child {
flex-basis: 27.1875%;
/* 27.1875% = 100% * 348px / (348px + 4 * 255px) */
}
}
<div class="container">
<div class="row row-of-images">
<div class="col-xs-12">
<img src="https://via.placeholder.com/348x255/69c/fff">
</div>
<div class="col-xs-12">
<img src="https://via.placeholder.com/233x255/c69/fff">
</div>
<div class="col-xs-12">
<img src="https://via.placeholder.com/233x255/c69/fff">
</div>
<div class="col-xs-12">
<img src="https://via.placeholder.com/233x255/c69/fff">
</div>
<div class="col-xs-12">
<img src="https://via.placeholder.com/233x255/c69/fff">
</div>
</div>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
The reason the images are different heights on the problem page "(domain) dot com slash da-dk/page/sbp" (but not in the posted source above) is because the images on the problem page have the .img-responsive class:
<div class="row">
<div class="col-sm-4">
<img src="http://placehold.it/348x255" class="img-responsive">
</div>
<div class="col-sm-2">
<img src="http://placehold.it/233x255" class="img-responsive">
</div>
<div class="col-sm-2">
<img src="http://placehold.it/233x255" class="img-responsive">
</div>
<div class="col-sm-2">
<img src="http://placehold.it/233x255" class="img-responsive">
</div>
<div class="col-sm-2">
<img src="http://placehold.it/233x255" class="img-responsive">
</div>
</div>
From the Bootstrap 3.3 documentation, .img-responsive applies:
max-width: 100%;, height: auto; and display: block; to the image so that it scales nicely to the parent element.
The first image is scaling to the width of the first column, which is col-sm-4. The other images are scaling to the width of a col-sm-2 column. So it's clear why the images are different height.
The simplest fix is to remove .img-responsive from all the images.
But if you want to keep the images responsive, you'll need to adjust the image aspect ratios so the wider and narrow images end up the same height.
Example with the aspect ratios adjusted:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-sm-4">
<img src="http://placehold.it/348x255" class="img-responsive">
</div>
<div class="col-sm-2">
<img src="http://placehold.it/153x255" class="img-responsive">
</div>
<div class="col-sm-2">
<img src="http://placehold.it/153x255" class="img-responsive">
</div>
<div class="col-sm-2">
<img src="http://placehold.it/153x255" class="img-responsive">
</div>
<div class="col-sm-2">
<img src="http://placehold.it/153x255" class="img-responsive">
</div>
</div>
I have created a website using the Bulma CSS framework for the styling. I also used the Bulma Carousel for a text carousel. I used the column feature in Bulma to have a carousel on the left of an image/video. This was working perfectly on my screen, until I wrapped the images in a tag with the class "image is-16by9" Now, the images are below the carousel. In addition, when the browser get small enough or I'm on mobile, the images get huge.
The goal is to have the images below the carousel and be scaled correctly on smaller devices and be larger and next to the carousel on desktops, along with the carousel.
.slick-prev::before,
.slick-next::before {
color: black !important;
}
.carousel {
overflow: hidden;
}
<section data-aos="fade-up" id="rendering" class="hero is-fullheight child">
<div class="hero-body">
<div class="container">
<div class="content is-large">
<h3>Title Here</h3>
<div id="columns is-vcentered">
<div class="column is-7">
<div class="3dCarousel">
<div class="item-1">
Item 1
</div>
<div class="item-2">
Item 2
</div>
<div class="item-3">
Item 3
</div>
</div>
</div>
<div class="column">
<figure class="image is-16by9">
<img
src="./images/render.png"
alt="Render"
/>
</figure>
</div>
</div>
</div>
</div>
</div>
</section>
The code gets an okay result on desktop, expect the images don't scale and aren't next to the carousel. I've been playing around with different fixes for a while but they either mess something else up or don't work at all.
Try adding is-mobile and is-multiline to your columns class
I am using older Skeleton css version, it is a 16 column grid system. I am trying to setup similar layout as in this picture.
http://imgur.com/sIV2aYo
I am pretty new to CSS, is using two containers (one inside another) a proper method?
Here is a sample code of what I been trying, but not working out too well =(
<div class="container">
<div class="eight columns alpha">
<div class="image">
<img alt="" src="images/coffee.jpg">
</div>
</div>
<div class="eight columns omega">
<div class="container">
<div class="eight columns">
<img alt="" src="images/plate.jpg">
</div>
<div class="eight columns">
<img alt="" src="images/macaro.jpg">
</div>
<div class="text area">
<p class="quote">"One of my favorite parts of using Square Register is being able to talk to customers while I am swiping their cards."</p>
<p class="name">Norm Mui, Coffee Foundry</p>
</div>
</div> <!-- 2nd container -->
</div>
</div> <!-- 1st container -->
Thanks in advance.
I don't know your CSS, but maybe this helps you:
HTML:
// The class "columns" is your "block" (div) that needs the content. I've made a CSS with a background-color, height and width.
// In that div "columns we create new "columns, numbered by 1,2 and 3. I've floated all the text to the left and gived it a margin. The first, second and the third a margin of 15px ( top, right, buttom and left ).
// In the div column "columns" I have made a textarea with also a margin of 15px. The vertical-align is for a top vertical align. with the display we means that it needs to be in the block, with a margin of 40% ( it takes 40% of the block).
<div id="container">
<div class="columns">
<div class="eight-columns-1">
<img alt="" src="http://ww1.prweb.com/prfiles/2014/04/10/11752526/gI_134971_best-image-web-hosting.png">
</div>
<div class="eight-columns-2">
<img alt="" src="http://www.causingeffect.com/images/made/images/example/cow_100_100_c1.jpg">
</div>
<div class="eight-columns-3">
<img alt="" src="http://www.causingeffect.com/images/made/images/example/cow_100_100_c1.jpg">
</div>
<div class="textarea">
<p class="quote">"One of my favorite parts of using Square Register is being able to talk to customers while I am swiping their cards."</p>
<p class="name">Norm Mui, Coffee Foundry</p>
</div>
</div>
</div>
CSS:
.columns {background-color:yellow; width: 530px; height: 285px;}
.eight-columns-1 {float:left; margin: 15px;}
.eight-columns-2 {float: left; margin: 15px;}
.eight-columns-3 {float:left; margin: 15px 15px 15px 0px;}
.textarea {vertical-align:top; margin: 15px; display:inline-block; width: 40%;}
I'm creating my first web page and I have 3 boxes with an image and text as contet. How do I make the boxes the same height regardless of the content?
New to css etc so please help.
I have tried padding, margin etc but nothing. My code is as follows:
<!------------------------------ Three Small Span Boxes --------------------------->
<div class="container-full-width" id="boxes_lite_section">
<div class="container" >
<div class="container-fluid" >
<!-- Start of markup for boxes lite element -->
<div id="widget_boxes_container" class="row-fluid" >
<div class="boxes">
<div class="box span4">
<p>
***
</p>
<a class="box-link">
<img class="box-image" src=".jpg" />
</a>
<p align="justify" style="margin-top:20px">
content here funding.
</p>
</div>
<!--end box1-->
<div class="box span4">
<p>
***
</p>
<a class="box-link">
<img class="box-image" src=".jpg" />
</a>
<p align="justify" style="margin-top:20px">
content here
</p>
</div>
<!--end box2-->
<div class="box span4">
<p>
***
</p>
<a class="box-link">
<img class="box-image" src=".jpg" />
</a>
<p align="justify">
content here
</p>
</div>
<!--end box3-->
</div>
<!-- end boxes -->
</div><!-- end row-fluid -->
<!-- End of markup for boxes lite element -->
</div>
<!-- .container-fluid-->
</div>
<!-- .container -->
</div>
<!----------------------------- End Three Small Span Boxes ------------------------->
When you set the height for an element, it will be shown with this regardless of the content.
BUT if the content become taller than height, the result may be very ugly.
so, it's better to set overflow:auto in your case, that will save the box height when content is taller...
div.box {
width: 350px; /*for example*/
height:300px; /*for example*/
background: blue; /*for example*/
color:white; /*for example*/
overflow:auto; /*for example*/
border:4px solid red; /*for example*/
}
You can see result Here and you can find out your last question you mentioned in comment...
If you want to hide overflow, try overflow:hidden instead...
If you are dealing with variable height you can use CSS tables to render your divs.
div.boxes { display:table-row; }
div.box { display:table-cell; }
This jsfiddle should give you an indication of what it will look like with your layout.
Practically every major browser supports CSS tables now, so feel free to use them when necessary. Fixed heights are ok, but can cause issues when your content grows beyond your original expected size.
I am wondering which is the best way to put spaces in between these 3 images with CSS using Bootstrap 3 RC2 as what I have done at the moment is not auto-resizing the images, even though I have set the width to auto in my #picture id tag. I wish for them to b inline and resize the images accordingly.
Here is my markup:
<div class="container">
<div class="row">
<div class="col-lg-4">
<img src="http://placehold.it/350x250" id="picture" />
</div>
<div class="col-lg-4">
<img src="http://placehold.it/350x250" id="picture" />
</div>
<div class="col-lg-4">
<img src="http://placehold.it/350x250" id="picture" />
</div>
</div>
</div>
CSS:
.container {
max-width:1000px;
background-color:white;
}
body {
background-color:cyan
}
#picture {
width:auto;
/*margin-left:10px; */
/*margin-right:10px; */
}
.col-lg-4 {
margin-left:10px;
margin-right:10px;
}
Check my Fiddle for a clearer view. Is there a better way to go about handling this?
Remove your own CSS for .col-lg-4: these margins may screw up the Bootstrap CSS. Next to that, these columns are only visible when your screen width is bigger than 1200 px.
Add the following classes to your divs: .col-xs-4 .col-sm-4 and .col-md-4, and give images a class="img-responsive" attribute.
It should work now as you wish.
As Harm Wellink mentioned, remove your css. You should only need the following html. Notice the "col-xs-4" and the "img-responsive" class. You do not need col-sm-4, col-md-4, col-lg-4 if you intend to have the 3 columns on all screen sizes.
<div class="container">
<div class="row">
<div class="col-xs-4">
<img src="http://placehold.it/350x250" id="picture1" class="img-responsive" />
</div>
<div class="col-xs-4">
<img src="http://placehold.it/350x250" id="picture2" class="img-responsive" />
</div>
<div class="col-xs-4">
<img src="http://placehold.it/350x250" id="picture3" class="img-responsive" />
</div>
</div>
If I understand your question right, you would like to show these pictures in a horizontal line, with a certain amount of space in between the pictures ?
First of all to get the DIV's in line change the following
.col-lg-4 {
display: inline-block;
}
try to specify a width for your container and row (e.g. 100%) and then your divs holding the pictures. Hope this helps you out?