Im currently having a problem with several images in one line. they are next to each other but every picture after the first one is moved down by one pixel.
maybe someone has an idea as I dont :(
link: removed
(the lower portfolio part is what I am talking about)
html
#protfolio_sec .all-portfolios {
margin-top : 20px;
margin-left : -10px;
}
#protfolio_sec .single-portfolio {
float : left;
margin-bottom : 10px;
width : 277px;
}
#protfolio_sec .single-portfolio:hover .img_hoverlay {
display : block;
}
<div class="all-portfolios">
<div class="col-sm-12 col-lg-12 col-md-12 col-xs-12 ">
<div class="single-portfolio web-design">
<img class="img-responsive" src="img/ptf/pre/test.jpg" alt="">
</div>
</div>
<div class="col-sm-12 col-lg-12 col-md-12 col-xs-12 ">
<div class="single-portfolio web-design">
<img class="img-responsive" src="img/ptf/pre/test.jpg" alt="">
</div>
</div>
</div>
would be great if someone could help.
thank you!
Add this css your custom css
.all-portfolios div[class*=col-]
{
min-height:auto !important;
}
Related
I'm creating a sample website for a bakery and I have three clickable photos that will lead to other pages on the site. They are all currently sitting on top of each other and I would like for them to be next to each other. I'm pretty new to coding and this is also my first post on stack overflow so let me know if I need to clarify anything or post more code. Thanks so much for any help.
I've tried img {flex-direction: row}, and tried wrapping all of my images inside of a div and changing the flex-direction like that.
img {
width: 170px;
height: 170px;
border-radius: 150px;
border: solid white 3px;
transition: transform .2s;
margin: 0 auto;
display: flex;
flex-direction: row;
}
img:hover {
transform: scale(1.5);
}
<img src="https://images.unsplash.com/photo-1514432324607-a09d9b4aefdd?
ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=60" alt="cup of coffee">
<div class="col-xs-12 col-sm-12 col-md-4 featured-gallery">
<div class="col-sm-12 thumbnail text-center">
<img alt="regional park A" class="img-responsive" src="https://images.unsplash.com/photo-1530019163123-f33edadb3833?
ixlib=rb-
1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80">
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 featured-gallery">
<div class="col-sm-12 thumbnail text-center">
<img alt="regional park B" class="img-responsive" src="https://images.unsplash.com/photo-1509365465985-25d11c17e812?
ixlib=rb-
1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=375&q=80">
</div>
</div>
My expected results are my photos laying next to each other in a row but my actual results are my photos laying next to each other in a column.
You were targeting flexbox layout on the image element itself which did not have any child element to process the direction. By default the columns had block level behavior which takes up the whole row. Wrap the images inside a parent container and then adjust the markup like this:
.container {
display: flex;
flex-direction: row;
}
img {
width: 170px;
height: 170px;
border-radius: 150px;
border: solid white 3px;
transition: transform .2s;
margin: 0 auto;
}
img:hover {
transform: scale(1.5);
}
<div class="container">
<div class="col-xs-12 col-sm-12 col-md-4 featured-gallery">
<div class="col-sm-12 thumbnail text-center">
<img src="https://images.unsplash.com/photo-1514432324607-a09d9b4aefdd?
ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=60" alt="cup of coffee">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 featured-gallery">
<div class="col-sm-12 thumbnail text-center">
<img alt="regional park A" class="img-responsive" src="https://images.unsplash.com/photo-1530019163123-f33edadb3833?
ixlib=rb-
1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 featured-gallery">
<div class="col-sm-12 thumbnail text-center">
<img alt="regional park B" class="img-responsive" src="https://images.unsplash.com/photo-1509365465985-25d11c17e812?
ixlib=rb-
1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=375&q=80">
</div>
</div>
</div>
Youre close! What you need is a parent element that wraps around all the images and is a flexbox. Then, you give each img a flex property so the flexbox parent knows how to scale and size them.
You can check out a good article about how to set up a flexbox here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Flexbox may also be overkill for this too, you can set them to have display:inline and they will be side by side. You can read more about inline vs block elements here: https://www.w3schools.com/html/html_blocks.asp
It looks like you are using Bootstrap's grid system. Your current design snippet works but is not technically correct and you could experience some issues as you move forward.
To ensure the layout works correction it should be
.container
.row
.col
This would become important as you add more rows of content on the page.
You can review the general layout on Bootstraps documentation pages.
https://getbootstrap.com/docs/4.3/layout/grid/
Place a "row" div around your image divs
You could try this rule :
img
{
display:flex;
flex-wrap:wrap;
}
Using Bootstrap, I am trying to get a larger margin space on the left and right of the screen and a thin space between images. Attempted to individually target images and play around with the margin but that changes the image size and since different images has different margin sizes, the images are not even.
Attempted to target all the images to have the same margin but the gap is too much which is not what I want is there a way around this? Added images to show what I want and what I currently have. My code as follows:
Expected outcome (Large margin left and right, thin margin between images)
Current Outcome (No margin left and right, large margin between images)
HTMl
<div class="row">
<div class="row" class="top-img-custom">
<div class="text-center col-md-4">
<img class="img-responsive" src="http://via.placeholder.com/650x512" alt="Smiley face">
</div>
<div class="text-center col-md-4">
<img class="img-responsive" src="http://via.placeholder.com/650x512" alt="Smiley face">
</div>
<div class="text-center col-md-4">
<img class="img-responsive" src="http://via.placeholder.com/650x512" alt="Smiley face">
</div>
</div>
</div>
CSS
.top-img-custom{
margin-left: 20px;
margin-right: 20px;
}
To achieve expected result, use below CSS
.top-img-custom{
margin-left: 20px;
margin-right: 20px;
padding-left:20px;
padding-right:20px;
}
.text-center {
text-align: center!important;
padding: 1px;
}
img{
width:100%;
}
https://codepen.io/nagasai/pen/dzNGqv
And as I mentioned before use both classes in one class-
body{
background-color: #f2f2f2!important;
}
.top-img-custom{
margin:10px 25px!important;
}
.top-img-custom .text-center{
padding: 0 1px!important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="row top-img-custom" >
<div class="text-center col-md-4 col-sm-4 col-xs-4">
<img class="img-responsive" src="https://www.w3schools.com/html/pic_mountain.jpg" alt="Smiley face">
</div>
<div class="text-center col-md-4 col-sm-4 col-xs-4">
<img class="img-responsive" src="https://www.w3schools.com/html/pic_mountain.jpg" alt="Smiley face">
</div>
<div class="text-center col-md-4 col-sm-4 col-xs-4">
<img class="img-responsive" src="https://www.w3schools.com/html/pic_mountain.jpg" alt="Smiley face">
</div>
</div>
</div>
This behaviour won't come totally easy to the bootstrap grid system - it is pretty much designed for 15px padding in each of its col- classes, and a negative margin on the containing row classes to compensate at the edges. Messing with those, it is pretty easy to get some accidental element wrapping or horizontal scrollbars.
My approach might be to leave the row and col- classes alone to size themselves, but give the contents of your col- classes a negative margin to fill more of the space. And you would have to be tricky if you didn't want this on the edge elements.
This css should work:
.top-image-custom .img-responsive {
margin-left: -12px;
margin-right: -12px;
}
If you don't want this on the edge elements then using some :first-of-type and :last-of-type selectors may help, or assign new classes in your html to differentiate.
This is similar to the layout I'm trying to achieve:
The code I have now
<div class="row ">
<div class="col-lg-6 row-eq-height push-right">
<img src="1.jpg" class="img-responsive">
</div>
<div class="col-lg-6 row-eq-height">
<div class="eq-row-text ">
<p class="row-text">Text description for image </p>
</div>
</div>
</div>
<div class="row ">
<div class="col-lg-6 row-eq-height ">
<div class="eq-row-text ">
<p class="row-text"> Text description for the image </p>
</div>
</div>
<div class="col-lg-6 row-eq-height">
<img src="1.jpg" class="img-responsive">
</div>
</div>
I have tried using CSS class "no-padding" and also tried playing around with margins. when i apply 0 padding, the left side of the first image touches the edge of the browser( this is desired), however the other edge(right side of image) still has some empty space.
How do I get rid of that empty space get the results like the reference layout?
.col-md-6{
padding-right: 0px;
padding-left: 0px;
}
There could be an issue with the <p> padding/margin, could also be an issue with the <img> padding/margin. However it seems to be an issue with the sizing of the elements within the row.
I did however seemingly fix the issue in my PEN HERE
I added a height: *** to the row class, this may be needed for desired results as you are using row-eq-height bootstrap class.
HTML
<div class="row ">
<div class="col-lg-6 row-eq-height push-right">
<img src="1.jpg" class="img-responsive">
</div>
<div class="col-lg-6 row-eq-height">
<div class="eq-row-text ">
<p class="row-text">Text description for image </p>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 row-eq-height ">
<div class="eq-row-text ">
<p class="row-text"> Text description for the image </p>
</div>
</div>
<div class="col-lg-6 row-eq-height">
<img src="1.jpg" class="img-responsive">
</div>
</div>
CSS
p{
margin: 0;
padding: 0;
}
img{
margin: 0;
padding: 0;
}
.row {
margin: 0;
padding: 0;
height:60px;
background-color: #eee
}
If using the LESS/SASS source: change #grid-gutter-width in the variables file to 0
If you want to get rid of the white space you will need to make your image bigger to span the cols. You can manually adjust the width of an image using css:
img {
width: 100%;
}
I'm a visual designer, so this may seem a silly question (and at one point, this wasn't broken!) but I'm stuck. I'm trying to get images to appear in a responsive row with a mouseover.
Can anyone help? I know the code is jacked; I've been struggling with the order of the divs. The mouseover is working, BUT the images are now stacking and aren't appearing in a row anymore. They're outside of the col-lg-4 container, but I've included that. What am I missing?
*image is FPO
/// HTML:
<div class="col-lg-12">
<div class="highlight">
<h3>LOREM IMPSUM DOLAR</h3>
<h5>The fox and the rabbit.</h5>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<figure class="cap-left">
<div class="thumbnail">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/T_Roosevelt.jpg/473px-T_Roosevelt.jpg" alt="">
<figcaptions><h4>Please let this work</h4></figcaptions>
</div>
</figure>
</div>
</div>
<div class="col-lg-4">
<figure class="cap-left">
<div class="thumbnail">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/T_Roosevelt.jpg/473px-T_Roosevelt.jpg" alt="">
<figcaptions><h4>Please let this work</h4></figcaptions>
</div>
</figure>
</div>
</div>
/// JSFiddle:
http://jsfiddle.net/zvcNa/
This is due to your padding: 30px 40px; for figcaptions{}.
figcaptions is 100% width and height, but add your padding to this size.
Remove this padding and add it to your figcaptions children :
figcaptions h4{
padding:30px;
}
FIDDLE
EDIT #1:
Replaced :
figure {
display: block;
position: relative;
}
.col-lg-4 {
display:block;
float:left;
}
FIDDLE
I'm trying to get an image to fit within a specific size div. Unfortunately, the image isn't conforming to it and is instead proportionally shrinking to a size that isn't big enough. I'm not sure what the best way is to go about getting the image to fit inside it is.
If this isn't enough code, I'd be happy to supply more, and I'm open to fixing any other errors that I am overlooking.
Here is the HTML
<div class="span3 top1">
<div class="row">
<div class="span3 food1">
<img src="images/food1.jpg" alt="">
</div>
</div>
<div class="row">
<div class="span3 name1">
heres the name
</div>
</div>
<div class="row">
<div class="span3 description1">
heres where i describe and say "read more"
</div>
</div>
</div>
My CSS
.top1{
height:390px;
background-color:#FFFFFF;
margin-top:10px;
}
.food1{
background-color:#000000;
height:230px;
}
.name1{
background-color:#555555;
height:90px;
}
.description1{
background-color:#777777;
height:70px;
}
Try this way:
<div class="container">
<div class="col-md-4" style="padding-left: 0px; padding-right: 0px;">
<img src="images/food1.jpg" class="img-responsive">
</div>
</div>
UPDATE:
In Bootstrap 4 img-responsive becomes img-fluid, so the solution using Bootstrap 4 is:
<div class="container">
<div class="col-md-4 px-0">
<img src="images/food1.jpg" class="img-fluid">
</div>
</div>
You can explicitly define the width and height of images, but the results may not be the best looking.
.food1 img {
width:100%;
height: 230px;
}
jsFiddle
...per your comment, you could also just block any overflow - see this example to see an image restricted by height and cut off because it's too wide.
.top1 {
height:390px;
background-color:#FFFFFF;
margin-top:10px;
overflow: hidden;
}
.top1 img {
height:100%;
}
Just a heads up that Bootstrap 4 now uses img-fluid instead of img-responsive, so double check which version you're using if you're having problems.
Simply add the class img-responsive to your img tag, it is applicable in bootstrap 3 onward!
I used this and works for me.
<div class="col-sm-3">
<img src="xxx.png" style="width: auto; height: 195px;">
</div>
I had this same problem and stumbled upon the following simple solution. Just add a bit of padding to the image and it resizes itself to fit within the div.
<div class="col-sm-3">
<img src="xxx.png" class="img-responsive" style="padding-top: 5px">
</div>
If any of you looking for Bootstrap-4. Here it is
<div class="row no-gutters">
<div class="col-10">
<img class="img-fluid" src="/resources/img1.jpg" alt="">
</div>
</div>
Most of the time,bootstrap project uses jQuery, so you can use jQuery.
Just get the width and height of parent with JQuery.offsetHeight() and JQuery.offsetWidth(), and set them to the child element with JQuery.width() and JQuery.height().
If you want to make it responsive, repeat the above steps in the $(window).resize(func), as well.