Here is a link to the codepen
http://codepen.io/yashrg/pen/GmhJj
Basically an image gallery that should show images in 5 columns.
I was using the seamless responsive photo grid tutorial from here http://css-tricks.com/seamless-responsive-photo-grid/
But the expected result is not what I expected. I only see 4 columns. Why could this be?
Related
I need help with a CSS code. I run a photography website on wordpress and i have some problems displaying my pictures. There are 2 formats of pictures that are being displayed: landscape (1200 x 800 px) and portrait (595 x 853px). I want to group the tall ones 2 per row because they look so much better. I have about 40-50 images per post.
Is there any way to do this?
I've attached a demo of how i would like to result to be.
Thank you!
You can use a jQuery plugin such as Masonry or Isotope to do this - these are designed to arrange your items in a grid so that they fit nicely.
You will still need to get some HTML and CSS in place before adding the plugin to adjust the positions of the images, so you'll need to work off the plugin documentation or examples (or provide a code snippet).
It depends on how dynamic your posts are. If there's a way for you to know the structure of your HTML + CSS + content before-hand, then you can create a .tall-row class for the tall images and a .long-row class for the long images. And it's basically planning out the layout ahead of time. You can easily do this using traditional CSS, CSS FlexBox (newer), or CSS Grid (newest).
If the order of the images is going to be some-what dynamic (so you don't know when a tall image will render or when a long image will render) you can try CSS Grid'd grid-auto-flow: dense; property, which attempts to calculate the best overall fit for all of it's children. Only if this doesn't work would I suggest using a JS or jQuery plugin.
Here's an example of CSS Grid's grid-auto-flow: dense;
https://jsfiddle.net/40p0q5xx/
I am working on a slideshow combining css and javascript, but currently I have no idea how to realize the planed design as it need to be responsive for different screen-sizes.
Following I've added a jpg visualizing the planned Layout:
Visualization of Layout
My approaches so far have been flexbox and float, but flexbox doesn't allow a 2 column 1 box : 2 box approach and float doesn't help with the adaption for different screen-sizes (wrap).
Does anyone have an idea for an approach? I realy want to avoid using different css for the 3 szenarios described in the picture above
Im trying to convert my default category posts to a specific style as show in the image. I'm stuck at the css end and can't figure out a way. Can anyone guide me onto building this kind of layout css?
Using w3.css 12 column responsive grid to do this. You can specify grid space for phones tablets and computers.
See here.
My code...
I'm trying to set up a Bootstrap 3 carousel to show 3 images per active slide, I want the next and previous images to be truncated but the centre image full width, similar to this example: https://thescene.com/.
I've played around with this for quite a while but can't seem to get the truncated effect? My initial idea is to have the containing div full width to show all 3 images in full with an overflow:hidden property to get the effect, but the carousel itself needs to be 1280px wide. Codeply is here: http://www.codeply.com/go/6eBfBskTsV
Why not grab one online? This component seems has a partial nearby image effect...
http://www.jssor.com/index.html
The bootstrap carousel is just a simple implementation rather than a universal solution, which means it can be cumbersome to tweak to achieve some complicated presentation. I guess unless you are just practising your skills, you won't like to make one by yourself.
I would like to publish my portfolio in my website. And my portfolio images sometimes horizontally wide and sometimes vertically wide. I did research a lil bit and i found this http://www.bootply.com/mohwImsUG4 solution it works great when i upload my vertical images. My question is how can i automatically fix width of grid layout to my images and of course if i have to see 2 images in one line its ok.
Screenshot (My Code)
Screenshot (Google [What i want])