Ok so I am making a filterable portfolio with bootstrap 3 and quicksand.js, I am using quicksand to filter the portfolio. Now I had this working fine when my images were set widths and heights but when I change the width and height to 100% the sorting is weird, the images become bigger when they are sorting and this causes all kinds of glitches.
I had to use jquery migrate to get the sorting to work because the tutorial was so old, I dont know if this will be a contributing factor to my issue.
Here is old jsfiddle with the issue.
Here is updated fiddle, with my max height + width fix
Also you can check out this link which has the images at a fixed width, the sorting looks fine but then they stack on top of each other at lower screen sizes.
UPDATE: Okay I have fixed the issue at desktop width by using max-width: 390px; and max-height: 390px; on my .portfolio img class. But now on lower resolutions (tablets etc) the images are bigger again. Would the best way to fix this be with media queries or any suggestions? I realize now that bootstrap is designed to be mobile first but I am too far in my code I believe, what do you guys suggest.
I resolved this issue by changing my portfolio img css to:
.portfolio img {
max-width: 100%;
width: 100%;
height: auto !important;
}
And used media queries to limit the width and height on the image at each viewport:
#media (max-width:767px) {
.portfolio img {
max-width: 100%;
max-height: 100%;
}
}
#media (min-width:768px) {
.portfolio img {
max-width: 240px;
max-height: 240px;
}
}
#media (min-width:992px) {
.portfolio img {
max-width: 314px;
max-height: 314px;
}
}
#media (min-width:1200px) {
.portfolio img {
max-width: 380px;
max-height: 380px;
}
}
http://jsfiddle.net/uv634/2/
Related
I've come across an issue i cannot seem to solve. Im using uncode theme- wordpress. If you see the link in desktop, the images of the carousel are waaay bigger than it needs to be. On mobile it is ok. i want it to fit the available size of screen, or at least kind of match it.
I have tried css and js, but if i change the height of the carousel image, there is a HUGE white space below it. there are no options available for this inside WP, so im assuming css/js is needed.
I added this custom css to make it visible for you the error. If the white spacing is removed, i can make the JS code easily so the images fit the screen:
.post-content .vc_row.limit-width.row-container {
max-width: 100%;
}
.post-content .row-parent {
padding: 0 !important;
}
#gallery-206225 .owl-dots{bottom:-22px!important;}
.owl-carousel .owl-item img {
width: auto!important;
height: 500px!important;
display: block;
margin: 0 auto;
}
#media(max-width:768px){
.owl-carousel .owl-item img {
width: 90%!important;
height: auto!important;
max-height:900px;
}}
any thoughts?
Link Here
You can set a max-height to the image and have that apply only to desktop screens above 1100px.
Like so:
#media (min-width: 1100px) {
.owl-carousel .owl-item img {
max-height: 400px;
}}
I am using the example of clásico listview with thumbnails present in the jquery mobile documentation. But if I upload images with different sizes , they are not suitable for resolution. How to solve this?
The code: http://demos.jquerymobile.com/1.4.5/listview/#&ui-state=dialog
You may use CSS max-width and max-height
li.ui-li-has-thumb img {
max-width: 80px;
max-height: 80px;
}
or you can force the size you want:
li.ui-li-has-thumb img {
width: 80px;
height: 80px;
}
I've created a web application where you can draw an image. When you print the the website, there should only be the image, and it should use as much space as possible on one page.
My problem: if the image is much higher than wide, it still uses the full width and the lower edge is cut off or is on a second page! Firefox also cuts off about 2% of the image at the right edge. How can I solve this problem using css? Or is this only possible with JavaScript?
#media print {
#content {
display:none;
}
#canvas {
position:absolute;
max-width:100%;
max-height:100%;
margin:0px;
}
}
Here's my JSFiddle: http://jsfiddle.net/Gh28n/6/
The trick is to set a fixed with so large it can fit any paper, and set the max-width to 100% so it will always be scaled down, and height to auto to maintain the aspect ratio, like so:
#canvas {
width: 9999em;
max-width: 100%;
max-height: 100%;
height: auto;
}
As for the clipping on the edge, removing the position: absolute fixed it.
edit: added max-height: 100%;
Hi I have question regarding css and javascript, here is link with image http://personal.crocodoc.com/YvRh8Hd
What I want to do is position smaller circles around big one. I am using bootstrap 3 and want to keep responsiveness on circles. What would be the best way to do positioning? The simple way I am going is defining in css positions
.one {
left: 260px;
top: -30px;
}
.two {
top: 50px;
left: 310px;
}
.three {
right: -100px;
top: 140px;
}
the problem is when I resize browser to smaller(to fit tablet screen or phone), circles hover each other, they should be positioned vertically inline. Thank You for Your answers.
Not an exact science, but you can use css media queries to adjust for various screen sizes to re-work your positioning.
Something like this:
#media (min-width: 600px) {
.one {
left: #left;
top: -#top;
}
}
#media (max-width: 599px) and (min-width: 300px) {
.one {
left: #left/2;
top: -#top/2;
}
}
If you're recompiling bootstrap's LESS, then they have screen sizes pre-defined:
#screen-xs, #screen-sm, #screen-md, #screen-lg
I've used variables to suggest you half the left/top dimensions.
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
There are a lot of dynamically designed websites out there where there divs or images shrink as the browser size decreases.
An example of this would be http://en.wikipedia.org/wiki/Main_Page
The div in which the text is in shrink as the browser size decreases. This happens up until a certain point, where it just decides to stop shrinking, and just start to cover the text boxes.
I would like to do this effect with a JSFiddle I am working on:
http://jsfiddle.net/MrLister/JwGuR/10/
If you stretch the size of the fiddle, you will see the pictures dynamically adapt.
The goal is to make it just stop shrinking at a certain point, and just start covering or caving in on this pictures. I want to do this because eventually it gets so small that they text on each image overlaps and it looks bad.
Here is the CSS for the Fiddle:
.figure {
position: relative;
display:inline-block;
max-width: 33%;
}
.figure .figcaption {
text-align: center;
height:0;
top: 40%;
width: 100%;
font-size: 55px;
color: white;
position: absolute;
z-index: 1;
}
.figure img {
display: block;
max-width: 100%;
}
Simply add a min-width size to the things you want to stop shrinking :)
Like so:
.figure {
position: relative;
display: inline-block;
max-width: 33%;
min-width: 150px;
}
Here's an updated fiddle: http://jsfiddle.net/jakelauer/JwGuR/13/
min-width:500px;
would cause the window to have a minimum width of 500px.
http://jsfiddle.net/JwGuR/14/ after you reach 500px the images stop resizing.
Here is an example of media queries. You use css to define min and max widths for certain cases. In your case, just give a max-width case and set the css properties there.
http://css-tricks.com/css-media-queries/
img{
width:100%;
}
#media all and (max-width: 699px) {
img{
width:500px;
}
}
This is a basic example. As Jake said, you can also just give it a min-width but in many cases, the layout of the page should change for mobile or tablet view where simply defining a min-width won't suffice