Can someone please help me as I am getting really fed up with this.
I cant understand why the images in each col-xs-6 is overlapping and leaving white space on the sides.
I am trying to get all over the images of equal size and responsive.
What am I doing wrong?
Any help or advice would be greatly appreciated
Thanks in advance
Reece
<div id="meettheband">
<div class="row">
<div class="col-xs-6 nobby">
<img src="/Users/Reece/Desktop/SLYDE_RESPONSIVE/img/GLAMPLATFORMS.jpg" class="platforms">
</div>
<div class="col-xs-6 dave">
<img src="/Users/Reece/Desktop/SLYDE_RESPONSIVE/img/GLAMPLATFORMS.jpg" class="platforms">
</div>
</div>
<div class="row">
<div class="col-xs-6 jammy">
<img src="/Users/Reece/Desktop/SLYDE_RESPONSIVE/img/GLAMPLATFORMS.jpg" class="platforms">
</div>
<div class="col-xs-6 dozy">
<img src="/Users/Reece/Desktop/SLYDE_RESPONSIVE/img/GLAMPLATFORMS.jpg" class="platforms">
</div>
</div>
</div>
#meettheband {
width: 100%;
height: auto;
}
.nobby {
border: red solid;
}
.dave {
border: red solid;
}
.jammy {
border: red solid;
}
.dozy {
border: red solid;
}
img .platforms {
max-width: 100%;
max-height: auto;
}
Related
I have 3 div s inside a another div, I want two of them starts at the same top position and the other one be in center of the other. this is the code
<div class="col-lg-8 col-md-8 col-xs-12 ">
<div class="col-1 div-container-product-images showbordergreen ">
<div class="div-product-images-list">
#foreach(var item in Model.Images)
{
<div class="mt-2 d-block"><img src="~/#item" width="70" height="70" /></div>
}
</div>
</div>
<div class="col-6 text-center d-inline-flex showborderred">
<img src="~/#Model.Images.FirstOrDefault()" width="200" height="300" style="padding: 10px;" />
</div>
<div class="col-4 d-inline-flex showborderblue">
Title
</div>
</div>
and this is css
.div-container-product-images {
display: inline-flex;
vertical-align: middle;
}
.div-product-images-list{
margin: auto;
}
.showborderred {
border: 2px solid red;
}
.showborderblue {
border: 2px solid blue;
}
.showbordergreen {
border: 2px solid green;
}
but it become like this:
I want the blue box and red box starts at same top position and the green box in middle height of red box
how can I do that?
Enable flex on your parent container. Then add align-items-start class to it and align-self-center to the green box.
I hope below code helps you.
I have wrapped columns in one row and added class .align-items-start for align column to top. and added .align-self-center class on last column which you want to align center.
.div-container-product-images {
display: inline-flex;
vertical-align: middle;
}
.div-product-images-list{
margin: auto;
}
.showborderred {
border: 2px solid red;
}
.showborderblue {
border: 2px solid blue;
}
.showbordergreen {
border: 2px solid green;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row align-items-start">
<div class="col-4 ">
<div class="div-container-product-images w-100 showbordergreen ">
<div class="div-product-images-list ">
<img src="~/#Model.Images.FirstOrDefault()" width="200" height="300" />
</div>
</div>
</div>
<div class="col-4 text-center d-inline-flex showborderred">
<img src="~/#Model.Images.FirstOrDefault()" width="200" height="300" />
</div>
<div class="col-4 align-self-center">
<div class="showborderblue">
Title
</div>
</div>
</div>
I need to create a kind-of 'outter' container of images to surround a div which contains text. Please see the attached image for a rough idea of what i'm trying to achieve. I've tried using columns with bootstrap but I'm unable to create the image overlap effect (on the right-hand side).
<!-- Top Layer -->
<div class="col-md-12"><img src="image1.png"></div>
<!-- Left Layer -->
<div class="col-md-3"><img src="image2.png"></div>
<!-- Text (Middle) -->
<div class="col-md-6"><p>This is the text This is the text</p></div>
<!-- Right Layer -->
<div class="col-md-3"><img src="image3.png"></div>
But this obviously causes problem with the long image on the right-hand side.
Any ideas how to complete this with CSS?
Any help would be greatly appreciated. Thanks
I would do it as 3 columns, although you haven't described how you would like this to look on smaller screens as the columns will collapse in order. The below snippet is a rough example of what you could do.
.padded {
padding: 1px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Left Column -->
<div class="center-block" style="width: 80%">
<div class="row">
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<div class="row">
<img src="http://via.placeholder.com/100x100" class="padded" />
</div>
<div class="row">
<img src="http://via.placeholder.com/100x100" class="padded" />
</div>
<div class="row">
<img src="http://via.placeholder.com/100x100" class="padded" />
</div>
</div>
<!-- Text (Middle) -->
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<div class="text-center">
<img src="http://via.placeholder.com/200x100" class="padded" />
</div>
<div class="panel">
This is the text This is the text
</div>
</div>
<!-- Right Column -->
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<div class="row">
<img src="http://via.placeholder.com/100x200" class="padded" />
</div>
<div class="row">
<img src="http://via.placeholder.com/100x100" class="padded" />
</div>
</div>
</div>
</div>
Alright, from what i can get, you need to arrange the images kind-of as an inverted 'U'- shaped and place the text in the between of the two side images. The idea is to float the images left or right accordingly and then set the display of the text as inline-block.
The following code places 4 boxes in an arrangement as asked in the question, you can align them as you want using margin-left property.
NOTE This arrangement is only possible if the boxes/divs are wide enough, so make sure to adjust the widths of each div. Not necessarily as i have done you can change it as you wish, just make sure that the boxes are wide enough to fill in the page or the arrangement will not show up.
#top{
display: inline-block;
height: 20%;
width: 50%;
background-color: red;
}
#left{
height: 50%;
width: 25%;
float: left;
background-color: blue;
}
#text{
height: 50%;
width: 50%;
background-color: green;
text-align: center;
float: left;
}
#right{
height: 50%;
width: 25%;
background-color: yellow;
float: right;
}
<body>
<div id='top'></div>
<div id='left'></div>
<div id='right'></div>
<div id="text"></div>
</body>
EDIT Don't know why stackOverflow is not able to show the result on running this code, but i suggest you copy it and run it manually, it will show something like the image attached.
Something like this?
.left-container, .right-container {
width: 60px;
float: left;
}
.center-container {
float: left;
}
.img-small {
width: 40px;
height: 40px;
margin: 10px;
background-color: green;
}
.img-big {
width: 40px;
height: 80px;
margin: 10px;
background-color: green;
}
.img-wide {
width: 80px;
height: 40px;
margin-top: 10px;
background-color: green;
}
.text {
width: 80px;
height: 120px;
margin-top: 10px;
background-color: blue;
}
<body>
<div class='left-container'>
<div class='img-small'></div>
<div class='img-small'></div>
<div class='img-small'></div>
<div class='img-small'></div>
</div>
<div class='center-container'>
<div class='img-wide'></div>
<div class='text'></div>
</div>
<div class='right-container'>
<div class='img-small'></div>
<div class='img-big'></div>
<div class='img-small'></div>
<div class='img-small'></div>
</div>
</body>
I have two bootstrap columns, side by side, but when I add a margin to separate them then the columns stack on top of each other. I am using the Mixed: mobile, tablet, and desktop grid template for my two columns, and I'm not sure whether this is the cause.
#antGame { // container
height: 60%;
position: relative;
background-color: #fff;
border: 1px solid grey;
padding: 0 !important;
}
#stimuliContainer {
height: 40%;
}
#stimuli {
width: 100%;
max-height: 100%;
}
#errorMsg {
height: 20%;
width: 100%;
}
#antInstruct {
height: 60%;
background-color: #fff;
border: 1px solid grey;
}
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-lg-8" id="antGame">
<div id="stimuliContainer">
<img id="stimuli" src="images/ant/cues/blank.png">
</div>
<div class="col-xs-12 col-sm-6 col-lg-8" id="errorMsg">
<span>Error Message</span>
</div>
</div>
<div class="col-xs-6 col-lg-4" id="antInstruct">
<h4>Instructions</h4>
<span>Hi</span>
</div>
</div>
</div>
I don't recommend to override the padding of the Bootstrap columns, because it can break the responsive, but you know, sometimes you are forced to do it.
In that case the most clean way you can do, is add a custom class .padding-2, that overrides the Boostrap padding but don't destroy the responsive.
HTML
<div class="container">
<div class="row">
<div class="col-xs-6 padding-2 ">
<div style="border: 1px black solid; background-color: red;">
1 col
</div>
</div>
<div class="col-xs-6 padding-2 ">
<div style="border: 1px black solid; background-color: blue;">
2 col
</div>
</div>
</div>
</div>
CSS
.padding-2 {
padding-left: 2px;
padding-right: 2px;
}
Demo: http://www.bootply.com/eO033QYCn3
Try to use padding instead of margin, and then, if you want to have for example border, you can add another element inside this one with padding.
Here's an example:
<div class="container">
<div class="col-xs-6" style="padding: 5px">
<div style="border: 1px black solid;">
1 col
</div>
</div>
<div class="col-xs-6" style="padding: 5px">
<div style="border: 1px black solid;">
2 col
</div>
</div>
</div>
And demo:
https://plnkr.co/edit/5fCMTJMJWPALk3W45t1i?p=preview
Couldn't find an answer to this so..
It's probably a very simple solution but I've been tunnel visioning for the past 20 minutes and it's frustrating me.
The padding of an image, which I'm trying to give a circle background element, is really annoying.
Margin doesn't work either.
My image is 120 px large, and the padding of 2em just makes it smaller, but I want it to stay the same size, but have a bigger background size.
Here's the code:
<div class="row">
</div class="container-fluid">
<div class="col-md-4 img-icon-pad">
<img src="img/icons/html.png" class="img-responsive img-icons" />
</div>
<div class="col-md-4">
<img src="img/icons/html.png" class="img-responsive img-icons" />
</div>
<div class="col-md-4">
<img src="img/icons/html.png" class="img-responsive img-icons" />
</div>
</div>
/* Boxes */
.img-icons {
height: 120px;
width: auto;
background-color: #f8f8ec;
border: 2px solid #e97117;
padding: 2em;
border-radius: 50%;
}
.img-icon-pad {
}
And a screenshot of what I mean:
No padding
https://i.gyazo.com/745896ad418274f70e8189f6b84c7b6d.png
Padding:
https://i.gyazo.com/b2a264d8a361a426cc43992d90352e79.png
I think it is ok
<div class="row">
<div class="container-fluid">
<div class="col-md-4 ">
<div class="thumbnail">
<img src="img/icons/html.png" class="img-responsive img-icons" />
</div>
</div>
<div class="col-md-4">
<img src="img/icons/html.png" class="img-responsive img-icons" />
</div>
<div class="col-md-4">
<img src="img/icons/html.png" class="img-responsive img-icons" />
</div>
</div>
<style>
.thumbnail {
height: 150px;
width: 150px;
border: 2px solid #e97117;
background-color: #f8f8ec;
padding: 2em;
}
</style>
Did you increase the height of .img-icons class from 120 to 150px or bigger if you want.
If that doesn't work then you have probably restricted size of the div containing the img.
I was going to say that in .img-icons class you have width set to auto. This may be causing resizing. If you set it to a fixed width it may not resize.
i think this is what are you trying to do :
<div class="row">
<div class="col-md-4">
<div class="img-responsive img-icons" >
<div class="img">
</div>
</div>
</div>
</div>
css:
.img-icons {
height: 120px;
width:120px;
background-color: #f8f8ec;
border: 2px solid #e97117;
border-radius: 50%;
padding: 2em;
}
.img{
text-align:center;
height:120px;
width:120px;
background-color: #f8f8ec;
border: 2px solid #e97117;
}
you can see the result here https://jsfiddle.net/nt0zqc1t/3/
I'm using bootstrap 3, and I have problems when I want to align vertically two div, for example ( http://jsfiddle.net/Xelnag/335nhneq/ )
<div class="row">
<div class="col-sm-6 vbox">
<img src="img/1.png" class="icon-16"/>
<img src="img/2.png" class="icon-16"/>
</div>
<div class="col-sm-6">
<img src="img/3.png" class="icon-32"/>
<img src="img/4.png" class="icon-32"/>
<img src="img/5.png" class="icon-32"/>
</div>
</div>
CSS for "vbox" is just a vertical align:
.vbox { vertical-align: bottom; }
What i would like to see is left div aligned to bottom to match the right side.
I have seen answers in stackoverflow with the use of javascript but so far i have found none that works with just CSS with the bootstrap 3 responsive design.
I found the best way. You need to follow below code.
Check out this fiddle: http://jsfiddle.net/harnishdesign/335nhneq/2/
HTML
<div class="row">
<div class="table-container">
<div class="col-xs-6 vbox" style="border:1px solid #000">
<img src="img/1.png" class="icon-16"/>
<img src="img/2.png" class="icon-16"/>
</div>
<div class="col-xs-6 vbox" style="border:1px solid #F00">
<img src="img/3.png" class="icon-32"/>
<img src="img/4.png" class="icon-32"/>
<img src="img/5.png" class="icon-32"/>
</div>
</div>
</div>
CSS
.table-container .vbox {display: table-cell;
float: none;
vertical-align: bottom;
}
.table-container {
display: table;
table-layout: fixed;
width: 100%;
}
.icon-16
{
width: 16px;
height: 16px;
}
.icon-32
{
width: 32px;
height: 32px;
}