I am using foundation 6 on one of my clients website. I am using flex grid. However I am unable to understand why it is causing layout to have a space after 3 columns. The page having problem is http://hakara.in/archive/
I want 3 tiles to fit in the row. But there is white space at the end. How to fix that.
Try removing the expanded class from #inner-content to make it contain to the grid. If you want it to span the width of the screen, add width: 100%
Related
I am new on this forum, hopefully someone can help me out.
I am trying to create a page with three independent columns. Each column will have its own divs of different heights. See this image - 3 columns
I achieved this layout using separate divs for each column and then divs for each window, then I tried to make the layout wrap when I make the screen smaller into two then three columns but this is where I got stuck. I want it to prioritise the top divs when the window gets smaller, see this image - 2 columns. Wrapping is of course made very simple with flex and grid but these two don't allow me to create different height divs in each column, it's always based on even horizontal lines, or if I use flex in column direction it messes up the order of windows when it wraps.
I am very particular about the order being as per the image, because I will need to keep adding content to the page and most recent content will need to always be at the top.
Maybe there is a way to add order to each div in flex which reaches beyond its container? Or can someone suggest another way to do it?
Hope this is clear enough...
Thanks
I've been provided the following layout (see link) but I'm not 100% certain which approach I should take for layout. I've spent 6 hours playing around with grid and flexbox but I keep thinking "This bit should be grid not flexbox and this bit should be flexbox not grid" and I've been going back and fore. Its a bit confusing so I was looking for some advice.
In the screenshot which will need to be clicked through to, to see. The grey portions of the UI are always present, the main nav column can expand and push whats to the right of it over. As shown it will be an icon based menu and when expanded will show the icon labels.
For this reason at a high level the the logo and main nav are one column and everything to the right is another column. Hence I display grid on this. The "rows" inside the first column are two flex item elements where the parent has display: flex, flex-direction: column on it. The first item just has a min-height with the "second" item having a flex 1 on it to fill the remaining height of the container which is equal to the viewport height. This then creates the visual of a row. I follow a similar pattern in the second column but the second "row" is it's self a flex wrapper for the "rows" it contains such as the orange ,blue sections.
The orange and blue bars wont always be shown depending on the page and what happens on it but the ui has to cater for them seamlessly.
I repeated this pattern for the inner two column section (green / pink areas) where the outer container is display grid with just two columns, 1 row. Everything inside is then display: flex, flex-direction: column.
To me everything seems one dimensional as I've only really got one actual row in each column when the ui is broken down. It seems odd to me to define a grid with only one actual row hence I was thinking it should all just be flex box as I don't really have any two dimensional layout as far as I can tell. Does it actually matter? I'm an experienced CSS developer but not with grid, so theres a bit of confusion in my head right now.
This all has to work with IE10 unfortunately too and be accessible so I have to set min-heights on all the row looking bits if they have text in them as the user might increase the font size.
As with the main nav the green side panel is hidden by default but a button when clicked will cause it to slide into to view and nudge the pink column over.
If you saw this UI how should it be broken down? Any advice or insights would be very welcome. Thank you.
Mocked UI layout wireframe
Good morning,
for purpose of sizing problem and element's positions on the screen between several devices, I want to display a grid as background (like a chess Grid) like this pic, for after that, displaying items like Text and Images on it.
The problem, is that the grid must be dynamical for each differents screen devices (like flex:1). That s why I don t want to use an image. Any idea about how to do it using code ? :/
I think I understand the problem and I'll explain how I would do this.
Firstly I would be using grid: https://css-tricks.com/snippets/css/complete-guide-grid/ if you aren't familiar.
I would set the parent's width and height to be dynamic and depend on the device.
Then set parent to display:grid; grid-template-rows:repeat(#,1fr) and grid-template-columns:repeat(#,1fr) where # is number of rows or columns. The fr unit basically evenly splits the available space between all of the columns/rows it needs to make. Put simply, 100px wide parent with 2 divs each with 1fr means both divs get 50px.
Put the right amount of children divs in the parent, it should auto fill the grid for you, if not then you would have to go through and put a grid-area:rowNum/colNum/span 1/span 1; on them.
Id give all divs in a row a class and then do .rowOne:nth-child(even) to style with chess pattern, so white and black.
If you needed to select a particular tile do .rowOne:nth-child(tilenumber) and go for your life.
Let me know if this helped or I did not understand the question at all :)
There is a library called [react-native-bgimage][1] which allows you to create a tiled background image, so I think this could help you do the trick. If you provide an image of 100x100 pixels with 10px tiles, I would assume the library would repeat that image for you.
Disclaimer: I have not yet tested this out!
I have 3 columns, using Bootstrap 3 grid system. Each column has varying amounts of text and with a button below it. I want to align the 3 buttons vertically, but I cannot use position:absolute and bottom:x because it breaks the responsive nature of the grid.
You can see the example here: http://codepen.io/enjay43/pen/tvcCD
Any ideas?
You can set a height for each column's top block.
See this fork I've made here
Hi I'm a beginner trying to create my own web layouts in Photoshop that are based on the Bootstrap 3 grid.
I've downloaded a few .psd files that mimic the Bootstrap 3 grid so you can based your designs around them.
I've also created an html grid using Bootstrap that you can see here http://juanchandler.com/grid-test.html view source to see the code.
My question is why the columns aren't 70 pixels wide and a gutter width of 30 pixels as is the case with the .psd grids...I've taken a screenshot of the .psd grid with my html over the top so you can see how the columns don't line up. http://juanchandler.com/screenshot3.jpg ie. the red / salmon columns are supposed the gutters but my html columns fall over them.
Hope someone can help.
Bootstrap's grid is based on percentages, so each column will be a percentage and not a precise pixel width. The only time it's 70px on a single col-*-1 column is when the screen size is equal to or greater than 1170px IF you are using a .container (and not the .container-fluid). The gutter is the padding inside the columns, so you don't see that because there's no inner div wrapping the content, in order to see the gutters, you have to have div or some kind of container inside the column:
<div class="col-sm-1 cell4"><div class="inner"> </div></div>
And color that inside div, not the col--
See example: http://jsbin.com/qotos/1/edit
As far as using Photoshop, since 2011 I've been doing responsive design and haven't used it. What I do is design in CSS and take a screen shot. Learn to use LESS or SCSS. Learn CSS first though.