I have been playing with twitter-bootstrap to create my photography page. I am using the default thumbnail class within li tags to create the border and align them. I have a whole bunch of thumbnails with images which are both horizontal and vertical.
The default settings really does not create a pretty layout of the thumbnails. By adding fixed height in the thumbnail's CSS, at least a neat grid gets formed now. However, within the thumbnail block, the images always align to the top. This leads to odd shaped grids when there is a vertical image in the stack.
I tried adding "vertical-align: middle;" within the thumbnail class, but does not seem to be working. I am pretty new to CSS, so kindly pardon me if I am missing something really obvious.
Unfortunately the Bootstrap thumbnails don't really normalize for a fixed height. If you want to make sure you have a clean grid, you need to crop your images to the same size. You could, alternately, use some CSS of your own to set the height of the li manually and set the img max-height to 100%, then use display: table-cell on the li so your vertical-align: middle will actually be effective at vertically centering the img.
Related
I am currently using Semplice inside of Wordpress. I am trying to create an image gallery slideshow, using both vertical and horizontal oriented photographs. I would like it to perform similar to how Squarespace handles its media sizes. In wordpress, the container is sizing itself to the vertical images, and I would like it to size to the horizontally oriented images.
my wordpress example: https://davidmatthewfiser.com/wedding/keely-aaron-test
the squarespace example: https://justinemontigny.com/lake-willoughby-vermont-wedding
is there a good way to set the container size and have the vertical images scale down, with the negative space on the sides?
thanks!
You can simply add this to your theme's custom CSS:
.content-block img {
max-height: 800px;
}
And set the max-height to however many px you want.
I have a project that involves having a sidebar that floats over an image. The sidebar is set to position: absolute to keep it over the image and to help it scale along with it when the screen size changes.
Here is a codepen that basically recreates what I'm working on: https://codepen.io/gojiHime/pen/JmYqaz
The issue I'm having is with controlling the size of the contents within the wrapper container. I want the preview div to scale along with the wrapper container. Currently, it does not work as expected in that the preview div does not start scaling as the width and height change for wrapper and for thumbs-inner. The thumbs-inner div scales correctly for the most part, but the bottom of div is cut off so you can't see the bottom of the scroll bar in smaller screens.
I know I set overflow: hidden on wrapper but without it the content in preview would extend outside of it as the height of wrapper changed.
So, I'm looking for ideas on how to fix the aforementioned issues. wrapper must stay absolutely positioned and the thumbs-inner div needs to have a vertical scrolling feature, so I can't do anything with those. I don't think setting a height makes sense for wrapper since it needs to scale responsively in height and width.
EDIT: Not sure how much this will help but this is a screenshot of what the layout of everything should look like: enter image description here
The Kraftmaid logo, full-size thumbnail and the text below it (which are in the .preview div in the codepen) have to be visible at all times when changing the screensize.
I'm not sure if this is exactly what you're looking for, but generally for responsive layouts you would want to avoid fixed dimensions, such as specific widths set in x number of pixels.
This shows your code with responsive layouts for .wrapper and .thumbs-inner (note that I haven't addressed any content issues within those two divs since I have no idea what your intended layout is):
https://codepen.io/anon/pen/ZqrZaj
Note that:
I've switched the two layout divs to use box-sizing: border-box; which will allow you to use pixels for margin and padding but still use percentages for width.
I've removed width from .wrapper and switched to percentage based absolute left and right declarations - if you modify these values, the layout should still work.
I've added borders to make the layout more obvious.
Currently im making a wordpress page, and i want to add these small author cards (pic related), which i can't seem to align side by side.
i figured that the margin is what restricts me from doing so.
The boxes are composed of shortcode. and i made my own div in my stylesheet to resize the width to 50%. However these author boxes are within a container, that sets a fixed margin, so if i for example try to float the boxes respectively left and right, they still align on top of each other.
Furthermore i tried adding individual div tags to my boxes, in order to css my way out of it, however still no luck.
Is there a way in which i can override the original margin?
Apply this CSS --
.author-shortcodes {
display:inline-block;
}
This will make those 2 boxes to stay next to each other. If applying this CSS does not really override, use 'display:inline-block !important;' instead.
https://gist.github.com/2354116
If you view the above page in Chrome/Firefox then everything seems to be fine. The divs at the bottom (the two headings and the social icons) are wrapped in a container div and center without issue.
If it's viewed in Safari though then these three divs are not centered at all :/
I'm not sure why this is.... can anyone help?
Note: had to assume a lot with your design so modify anything that does not fit your original design.
First off, you are not properly containing your page elements (content, carousel, footer), you currently have multiple width containers trying to reside side-by-side and that is breaking your design in multiple places.
Your content container is width:940px, your .wrapper div is width:750px, your .paramWrapper div is width:870px, your .carousel div is width:735px. You have to pick one width and stick to it and just use margin to push content accordingly across your page. I used 860px, which is the width of the span11 class.
Next, you're modifying the bootstrap.css stylesheet directly, that means that whenever the bootstrap gets updated all of your changes will be lost if you overwrite the bootstrap stylesheet, so create a another stylesheet and put all of your custom styles there and just load it "after" the bootstrap stylesheet in your header.
Now onto your original issue, the bottom .paraWrapper div is not properly stacking because you have a width of 870px set in your container and the elements within do not add up to that width:
span3 + span3 + span2 + margin = 640px
So it was not an issue or a bug, its just your layout.
Here is a fixed version that i very quickly put up so you're going to have to modify the elements to fit your design once again: http://jsfiddle.net/rzSFa/3/, here is a demo of what it looks like.
By the way, you're using the responsive bootstrap stylesheet for naught, it is currently not doing much in your case so why even use it? You can easily modify a few media queries to support my fixed version though, but yours will not work at all because you're declaring all of your own classes with custom widths so there is no point in including it.
I want to create a polaroid style image using CSS. However, I'd like to square the image creating a large thumbnail so all images are the same size. I don't know the dimensions of the image beforehand and they are likely different. I was thinking of using a figure tag along with the figcaption to caption the photo. How do I create the thumbnail when the dimensions of the image are unknown. I looked at Create Resizing Thumbnails Using Overflow Property and Creating Thumbnails Using the CSS Clip Property, but neither seemed to account for unknown dimensions.
This Example uses the overflow technique to create a thumbnail by only setting the width, and the height of the image is auto set The container div then hides the excess image beyond what you want to show.
Then by simply using padding and container divs, you can create the white polaroid affect.
This Example lets the image have full 100% width, and find image with the shortest height, and applies this height to all the polaroid images so all the polaroids are the same height. If you aren't really worried about having them each the same height. Then do it this way
It is fairly simple with the figure and figcaption tags, and I was able to recreate the effect without any superfluous markup.
The really essential CSS is:
figure{height:155px; width:125px; overflow:hidden;}
and by applying position:relative; to figure as well, and using some relative positioning on the figcaption, you are able to get a neat Polaroid effect.
Demo
Because you suggested them, I'm sure you know how figure and figcaption are supported across browsers.
Clip only works with rectangles. Overflow will work fine, just define the width of the images in the class.
Example