If you go to the following page: play.yoozon.com
and do an inspect element on the gallery in the section titled "Screenshots", you should see the widths and margins I've used. For some reason, the group of screenshots seem to be shifted to the left, and I can't seem to center them without using padding, which adds extra space to the entire page and looks bad on mobile.
The reason why I haven't included code here is because I can't figure out which div is the relevant one for this problem, and a lot of it makes use of bootstrap, which would take up a ton of space here to include everything.
your container: .owl-wrapper has a width of 1232px while it's parent seems to be significantly smaller and set to overflow: hidden. Change .owl-wrapper to width: 100%. Then remove float: left from .owl-item and add display: inline-block instead. That should do it.
Replace your column with this..
<div class="col-sm-12 col-md-12 col-lg-12" style="width: 100%;">
<div id="owl-gallery" class="owl-carousel owl-theme" style="opacity: 1; display: block;">
<div class="owl-wrapper-outer">
<div class="owl-wrapper" style="width: 100%; left: 0px; display: block;">
<div class="owl-item" style="width: 154px;">
<div class="item"><a href="images/screenshot1#2x.png" data-lightbox-
gallery="gallery1" data-lightbox-hidpi="images/screenshot1#2x.png">
<img src="images/screenshot1.png" class="img-responsive img-rounded"
alt="img"></a></div>
</div>
<div class="owl-item" style="width: 154px;">
<div class="item"><a href="images/screenshot3#2x.jpg" data-lightbox-
gallery="gallery1" data-lightbox-hidpi="images/screenshot3#2x.jpg">
<img src="images/screenshot3.jpg" class="img-responsive img-rounded"
alt="img"></a></div>
</div>
<div class="owl-item" style="width: 154px;">
<div class="item"><a href="images/screenshot2#2x.png" data-lightbox-
gallery="gallery1" data-lightbox-hidpi="images/screenshot2#2x.png">
<img src="images/screenshot2.png" class="img-responsive img-rounded"
alt="img"></a></div>
</div>
<div class="owl-item" style="width: 154px;">
<div class="item"><a href="images/screenshot4#2x.jpg" data-lightbox-
gallery="gallery1" data-lightbox-hidpi="images/screenshot4#2x.jpg">
<img src="images/screenshot4.JPG" class="img-responsive img-rounded"
alt="img"></a></div>
</div>
</div>
</div>
<div class="owl-controls clickable" style="display: none;">
<div class="owl-pagination">
<div class="owl-page"><span class=""></span></div>
</div>
</div>
</div>
</div>
I have not worked with Bootstrap, but I know HTML & CSS.
I would set the width of your owl-wrapper div to 750px (this should be large enough to contain the 4 owl-item divs set to their current width of 182px). Then change the display to inline-block, the position to relative, and use margins to center like so:
<div class="owl-wrapper" style="width: 750px; position: relative; margin: 0 auto; display: inline-block; -webkit-transition: all 0ms ease; transition: all 0ms ease;">
Also, if you want backwards compatibility with older versions of firefox, you may still wish to include the animation code with -moz prefix as well.
I hope that works for you! :)
Related
I'm trying to (1) get an image carousel to vertically center images, and (2) get the carousel to shrink to the height of the smallest image [i.e. not have wasted white space]. This is sort of a "multiple image" carousel, like this one: https://bbbootstrap.com/snippets/clients-brand-logo-carousel-slider-20683486.
I don't know what classes to add where. Obviously looked at d-flex + justify-items + align-items, and some other SO posts suggesting that I change the oc-item and related classes to height: 100%; position: relative; but none of those seemed to have the desired effect.
Given the naming, I assume this is an implementation of the owl carousel (https://owlcarousel2.github.io/OwlCarousel2/).
HTML, which includes many elements that are added-in via JS (not my JS, I'm using a package I purchased from Themeforest, called Canvas https://themes.semicolonweb.com/html/canvas/blocks.html... I think it's the one on the bottom of this page https://themes.semicolonweb.com/html/canvas/slider-owl.html the CSS and JS should be the same for this page as what I'm using):
<section id="content">
<div class="content-wrap p-0" id="content-wrap-logos">
<div class="container">
<div class="fancy-title title-center title-border m-4">
<h4><small>AS SEEN WITH</small></h4>
</div>
<div id="oc-images" class="owl-carousel image-carousel carousel-widget align-middle align-items-center owl-loaded owl-drag with-carousel-dots" data-items-xs="2" data-items-sm="3" data-items-lg="4" data-items-xl="5">
<div class="owl-stage-outer"><div class="owl-stage" style="transform: translate3d(0px, 0px, 0px); transition: all 0s ease 0s; width: 2369px;">
<div class="owl-item active" style="width: 243.2px; margin-right: 20px;">
<div class="oc-item">
<img src="..." alt="...">
</div>
</div>
<div class="owl-item active" style="width: 243.2px; margin-right: 20px;">
<div class="oc-item">
<img src="i..." alt="...">
</div>
</div>
... etc ...
</div>
</div>
<div class="owl-nav">
<button type="button" role="presentation" class="owl-prev disabled">
<i class="icon-angle-left"></i>
</button>
<button type="button" role="presentation" class="owl-next">
<i class="icon-angle-right"></i>
</button>
</div>
<div class="owl-dots">
<button role="button" class="owl-dot active"><span></span></button>
<button role="button" class="owl-dot"><span></span></button></div></div>
</div>
</div>
</div>
</section>
Your are not shared the css code but here is the solution.
Give anchor display block , min-height and vertical-align middle. So image come vertically center.
.owl-item a {
display: block;
vertical-align: middle;
min-height: 38px;
}
This question already has answers here:
Float 2 elements side by side inside a container div
(2 answers)
Closed 3 years ago.
I have loop that goes trough all pictures that I have and displays them. I would like to display them in one row, from left to right, but with css that I have is displaying them one under other. I have use flow but not sure if I used it correctly.
Here is my code:
.column.is-narrow {
float: right;
}
.box {
float: right;
}
<div class="column">
<div class="columns" ng-repeat="a in $ctrl.f">
<div class="column is-narrow">
<div class="box" style="width: 200px;">
<p class="title is-5">{{album}}</p>
<figure class="image is-128x128">
<!--<img ng-src="{{src}}"> remove and replaced for demo purpose-->
<img src="http://dummyimage.com/128x128" />
</figure>
<p class="subtitle">{{person}}</p>
</div>
</div>
</div>
I am aware that my css is not correct I have been searching for answer but couldn't find it.
Basically, when you float things, they'll still wrap if there isn't enough space to display both side by side. The easiest solution is to set a width on them to ensure that their container will always be wide enough to fit the content. You can do it with percentages or pixels, depending on your use case.
Note: If you use percentages, percentages adding up to 100% may still cause it to wrap, because they may not take into account padding, margin and/or border depending on other things. I usually do something like 49% for both, then float one right and one left.
You may use display and mind this inline-style <div class="box" style="width: 200px;"> wich is to start with, not wide enough to hold texts and img side by side
display:table/table-cell;
.column.is-narrow {
float: right;
}
.box {display:table;}
.box> p, .box> figure {display:table-cell;vertical-align:middle/* or top or else */
}
<div class="column">
<div class="columns" ng-repeat="a in $ctrl.f">
<div class="column is-narrow">
<div class="box" style="width: 200px;">
<p class="title is-5">{{album}}</p>
<figure class="image is-128x128">
<!--<img ng-src="{{src}}"> remove and replaced for demo purpose-->
<img src="http://dummyimage.com/128x128" />
</figure>
<p class="subtitle">{{person}}</p>
</div>
</div>
</div>
display:flex;
.column.is-narrow {
float: right;
}
.box {
display: flex;
/* removed width:200px from inline-style*/
}
p {
margin: auto;
}
<div class="column">
<div class="columns" ng-repeat="a in $ctrl.f">
<div class="column is-narrow">
<div class="box">
<p class="title is-5">{{album}}</p>
<figure class="image is-128x128">
<!--<img ng-src="{{src}}"> remove and replaced for demo purpose-->
<img src="http://dummyimage.com/128x128" />
</figure>
<p class="subtitle">{{person}}</p>
</div>
</div>
</div>
The easiest way is to declare the parent div as a flex container by setting the property display: flex and flex-direction:row. If you don't want to wrap your pictures, you can set flex-wrap:nowrap.
Here http://the-echoplex.net/flexyboxes/ is nice playground for flex box.
So I found the answer and it was pretty simple :)
I just had to add one more div with class with which I will float it to left. This is what I wanted:
.html
<div class="column">
<div class="columns">
<div class="float" ng-repeat="a in $ctrl.f"> /* added this line of code */
<div class="column is-narrow">
<div class="box" style="width: 200px;">
<p class="title is-5">{{album}}</p>
<figure class="image is-128x128">
<!--<img ng-src="{{src}}"> remove and replaced for demo purpose-->
<img src="http://dummyimage.com/128x128" />
</figure>
</div>
</div>
<p class="subtitle">{{person}}</p>
</div>
</div>
</div>
.css
.float{
float:left;
}
That was it. It's working. :)
I'm trying to use Bootstrap grid system with rows each has 4 column contains image, but the image size is big and it gets over its container, so I set image position: absolute and div position: relative but it still doesn't work. Is there any way to make the image fit the div container with container's size?
.sec5row {
border: 1px solid red;
position: relative;
}
.filter {
position: absolute;
}
<div class="container">
<div class="row">
<div class="col-md-3 sec5row">
<img class="filter" src="https://placehold.it/40" alt="f1">
</div>
<div class="col-md-3 sec5row">
<img class="filter" src="https://placehold.it/40" alt="f1">
</div>
<div class="col-md-3 sec5row">
<img class="filter" src="https://placehold.it/40" alt="f1">
</div>
<div class="col-md-3 sec5row">
<img class="filter" src="https://placehold.it/40" alt="f1">
</div>
</div>
<div>
You can use the below code to fit image inside the responsive div
.filter {
width:100%;/*To occupy image full width of the container and also fit inside the container*/
max-width:100%/*To fit inside the container alone with natural size of the image ,Use either of these width or max-width based on your need*/
height:auto;
}
I think the bootstrap class ".img-responsive" solves your problem. So try something like this:
<div class="container">
<div class="row">
<div class="col-md-3">
<img class="img-responsive" src="resources/images/f1.jpg" alt="f1">
</div>
<div class="col-md-3">
<img class="img-responsive" src="resources/images/f2.jpg" alt="f1">
</div>
<div class="col-md-3">
<img class="img-responsive" src="resources/images/f3.jpg" alt="f1">
</div>
<div class="col-md-3">
<img class="img-responsive" src="resources/images/f4.jpg" alt="f1">
</div>
</div>
<div>
It sets the style of your image to "max-width: 100%;" and "height: auto;" which should be exactly what you need. There should be no need for any additional css.
Add css to your code
#img {
width: 100px;//change px size
height: 100px;//change px size
padding-left: 3px;
padding-top: 5px;
}
Just add class="img-responsive" to your img tag...it works fine
I'm trying to achieve the following layout for a search result box. Specifically a 100% width and height image that on the right has two stacked containers that equals the height of the image, each with differing background colours that are butted up right against the image.
All attempts to achieve this simple layout are failing miserably. The issue I keep hitting is the when using something like:
<div class="search-result-box">
<div class="row">
<div class="col-md-3">
<img src="" class="img-responsive" style="height: 196px;" height="196">
</div>
<div class="col-md-9">
...
</div>
</div>
</div>
The image doesn't quite fill the col-md-3 column completely and thus you see the column's background.
What's the best way to do this?
Bootstrap columns have a padding of 15px by default. Also the image width has to be 100%. You can do something like this:
<div class="search-result-box">
<div class="row">
<div class="col-md-3" style="padding: 0;">
<img src="" class="img-responsive" style="width: 100%;">
</div>
<div class="col-md-9">
...
</div>
</div>
</div>
Jsfiddle: http://jsfiddle.net/HM4gE/1/
I wouldn't use Bootstrap columns though to achieve this since you seem to have some fixed heights and widths for columns. Instead I would do it like this (given that the height and the width of the image is always 196px): http://jsfiddle.net/HM4gE/2/
Check browser support for calc() before using it: http://caniuse.com/calc
Here a possible answer:
<div class="search-result-box">
<div class="row">
<div class="col-md-3">
<img src="" class="img-responsive" style="height: 196px;" height="196" />
</div>
<div class="col-md-9">
<div class="title">Title</div>
<div>Link1</div>
</div>
</div>
</div>
.search-result-box {
display: table;
width: 100%;
}
.row {
display: table-row;
}
.row > * {
display: table-cell;
}
.col-md-3 {
background: orange;
width: 260px;
height: 196px;
}
.col-md-9 {
vertical-align:top;
background: grey;
}
.title {
background: #ccc;
width: 100%;
height: 150px;
}
http://jsfiddle.net/junkie/fAPQ6/2/
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.