So I'm trying to insert pictures with different height next to eachother and under each other like this:
http://i.stack.imgur.com/RgH1O.png
I know how to put them next to each other with the same height, but whenever I try to put them next to each other with different heights, IMG1's bottom line goes down to IMG4's bottom line. How do I make it like this??
Thank you!
You can do this manually by floating 2 columns next to each other and filling these columns equally with images.
Or you can use a plugin like Grid-A-Licious which is responsive as well.
It will build your grid layout for you.
http://suprb.com/apps/gridalicious/
Related
I am trying to achieve the following layout for one of the pages I am building using bootstrap 4.
Sections 1 and 2 are basically container fluids with col-4/col-8 and col-5/col-7 layouts and have a background image or background color.
On top of this I have to place a div with some text and button, and depending on the placement, left or right column, the content must be confined to the size of container i.e. left and right margins same as set by container. This also needs to be responsive in nature.
I have tried adding margins based on media queries that seems to be a very ugly solution.
How do I achieve this in a more efficient way?
Thanks!!
Problem:
I'm creating a pricing list with 3 tiers. Nothing crazy here. But I've got a description which can be variable in length. So I can't use any fixed heights or it will break as I reduce the scale of the screen.
Current this is what it looks like:
You can see that the green line is not aligned whether each other.
Is it possible to align them and make them responsive too using flexbox?
I have a CodePen here that has all the code to create this:
https://codepen.io/Justintlai/pen/aaEyXR
I used jQuery to resolve the same taking your codepen demo.
Click here https://codepen.io/MohdNadeem/pen/bxaodW for the same
I'm trying to create a page with 5 images that maintain the structure until under 360px where it goes into single column evenly spaced.
Wondering what the best solution would be to this?
I've tried messing around with the responsivegridsystem.com method but I'm a little confused by it, and the issue of the 5th image staying centered and the same size is required.
Looking to be able to adjust the sizing of the pictures and the spacing between and around them if that's possible?
Thank you
desktop:
http://i.stack.imgur.com/0sEKC.jpg
mobile:
http://i.stack.imgur.com/AKmXg.jpg
I need to make a page which makes use of the 960 grid system which has a multi-row column. What I mean is I have three columns in a 16 column separated into 3-10-3 but on the last column, I need to make several divs for news feed, ads and also a "follow us on..." box which will all be aligned vertically. Refer to the picture for a visual pov.
Is there a way to this on 960gs? It seems like I can just pile divs of equal width in the column but I don't know. Help please
I've got it, turns out instead of using more divs with 'grid_x' classes within a grid column, you can just use normal divs with no classes and it will automatically align to the parent div.
I'd like to create a 3 column layout, with the middle being for all the content and menus and the other two being a solid background color.
I have something like this set up already, but the middle column doesn't extend to the bottom of the page. How can I get this middle column to extend to the bottom of the page?
Since most pure-CSS answers to this question are not supported by browsers, your best best is often to use a background image for this. Create the image with the right sized columns and apply it to whatever contains all three columns on the page. Make sure that the image can be horizontally repeated, and it will do so all the way down to the bottom of the page, even if the middle column is not actually the right size.
This site is really helpful for this sort of thing:
http://css.maxdesign.com.au/floatutorial/tutorial0916.htm
But I think the basic idea is you create a float:left div and then a float:right div and then another div for the middle.