I am using Unsemantic CSS Grid framework to create a layout that looks something like this (simplified to make question clear):
What you are looking at here is 3 rows, each with 2 columns. The code looks roughly like this:
<!-- First row -->
<div class="grid-50">
Title 1
</div>
<div class="grid-50">
Title 2
</div>
<div class='clear'></div>
<!-- Second row -->
<div class="grid-50">
<img src='image1.png' />
</div>
<div class="grid-50">
<img src='image2.png' />
</div>
<div class='clear'></div>
<!-- Third row -->
<div class="grid-50">
Text paragraph here
</div>
<div class="grid-50">
Another paragraph of text
</div>
<div class='clear'></div>
The great thing about using 3 rows is that even if image 1 and image 2 are not the same height, the paragraph of text below them lines up across the two columns (meaning it starts at the same vertical position in both columns) since I use a 'clear' after the images. If I had instead used 1 single row with 2 columns, where each column is a div that has a title, image and paragraph text one on top of the other, then the paragraph text would not line up if the images had different heights. So using 3 rows gives me exactly what I am looking for.
Unfortunately when viewed on a mobile device this is what happens:
This is because the two columns of each row end up on top of each other.
What I would instead like to get is this:
In other words, I want row1col1, row2col1 and row3col1 to stick together, and then row1col2, row2col2 and row2col2 to appear below.
How do I go about doing this? Is there anything in Unsemantic that allows me to "tie" a column together.
If I instead create 2 divs with title,image and text para, and put them in 1 row, that will solve this issue, but then the text paragraphs will NOT line up if the images are different heights. I cannot hard code the height because this is a fluid layout, and when the width of the page changes the width of the columns will change, which in turn will change the width of the images (since their width is set to 100% of container) and consequently their heights will change. Any tricks, workarounds or suggestions to get this approach working would be most helpful.
As a last resort I am thinking of using jQuery to position the paragraph text on page resize; if you feel that is a good solution (or the only solution) please feel free to share any recommendations or pitfalls to watch out for in this approach.
Related
In Figma(not really matter where) template has 1920px width. I want to create a page from it, but in the browser, the page has 1903px. Some of my elements do not fit and wrap down (when using flex-wrap e.g) due to it. So the question is, how to make it properly?
EDIT: On this
screen with clarification I tried to add fourth square but there no space so it wrapped to the bottom. Browser width is 1903px, within template I do from is 1920px. How other people do in situations like this, how it must be done to make it responsive on all pc screens?
Wrap it inside container like in bootstrap you can specify to which screen only it can wrap
For example:
.container-xl will only wrap your content inside container on xLarge screen only.
There are a couple of different ways to tackle this problem. The first would be something along the lines of Rashidtvmr's answer. You can use Bootstrap in your project and simply follow their guide for creating a grid system in your project. With bootstrap, you can solve your issue with something like the below code:
<div class="container">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-6">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
Where a grid system is created of 12 columns and you can specify how many an element should take up with col-2, col-3, col-4, etc. If you want them all to be the same width over all screens, then just specify each as col and bootstrap will take care of the rest.
If you can't or don't want to use Bootstrap, the next solution would be to create your own grid system using CSS. Without an example of your code, it's hard to specify exactly how it should look but following this guide should help you out.
In Bootstrap, must all content- even just a basic block of text placed in the middle of a page for example, be placed inside columns and rows. My website seems to work just fine doing this:
<div class="container-fluid">
<h2>My Heading</h2>
<p>This Is Content On the page</p>
</div>
Yet, I have been told it should be like this:
<div class="container-fluid">
<h2>My Heading</h2>
<div class="row">
<div class="col">I'm content inside the grid</div>
</div>
</div>
Yet, on some of the templates on the bootstrap site itself, they don't always use columns and rows.
I'm really confused...
Thanks
No, not all content needs to be placed in .rows.
.rows and .cols simply provide you with a customizeable grid system (i.e.: number of columns, gutter sizes, responsiveness breakpoints are a few of the things one could customize) aimed at displaying content differently at various page widths. That (and also the division of the row in 12 columns) are what it was designed for.
The only purpose of rows and cols is to divide the space differently at different page widths and to provide some minor padding (gutters). If you don't need that for a part of your content, don't use it. Whenever you have a section which you want displayed according to your own custom rules, you can simply include and style it as you want.
So, for example, this is perfectly valid and can be seen in various Bootstrap examples:
<div class="container">
<div class="row">
<div class="col">
... normal layout cols here
</div>
</div>
<div>
your custom stuff here. you need to provide responsiveness CSS rules for this content.
Out of the box, being a `<div>`, this will fill all the available width
if, for example, it was included in a `.container-fluid`,
it would span the entire browser window, at all screen widths.
</div>
<div class="row">
<div class="col">
... more normal layout here...
</div>
</div>
But whenever you want to use .cols, you should place them as direct children of .rows. If you do not, you will see some nasty horizontal scrollbars across your content, because the grid has a system of negative margins and (positive) padding to cater for gutters at various width sizes.
With this basic example everything works fine, especially when the heading is centered. Using different approach for Bootstrap grid is usually not a good idea.
From Bootstrap docs:
In a grid layout, content must be placed within columns and only
columns may be immediate children of rows.
As alignment problems will occur in the long run.
Secondly when you start using SASS with Bootstrap and change grid variables then everything stays aligned and is controlled from
one place.
In your example if you want to align the heading you need to add a margin-left so that is would be aligned with I'm content inside the grid.
Look at this example how everything is aligning with and without rows/columns: https://codepen.io/LaCertosus/pen/KKKzVqR
<div class="container-fluid mt-5">
<div class="row">
<div class="col">
This text is inside <b>row</b> and <b>col</b>
</div>
</div>
<div class="row">
This text is only inside <b>row</b>
</div>
<div class="col">
This text is only inside <b>col</b>
</div>
<div>
This text is only <b>container</b>
</div>
</div>
<div>
This text is outside <b>container</b>
</div>
It is the right question to ask why I have to generate so much boilerplate but it will come out in the long run when elements need to align and scale in different screen sizes.
I have a table which takes the whole screen width. In each table row, there is a Bootstrap 3 grid within a panel.
The problem is that the table column is too thick to contain my Bootstrap grid, and the result is this :
Here we see that the last button is overlapping the table row, going too far. But if I switch to my 24" monitor, there is no longer this problem since the screen is wider and therefore the table rows are wider too. It's the same if I remove some table rows, they will be wider and it will not overlap.
So my question is : is there a way to have a dynamic and fluid grid system which would automatically arrange the Bootstrap grid so it would not overlap ?
Here is a Codepen to illustrate the problem : codepen.io/anon/pen/BKZaWe
I would like the panels to have two buttons per row instead of crushing four together, but if we enlarge the table or remove some panels then it would show 3 or 4 buttons per row.
Have you tried: http://getbootstrap.com/css/#grid-example-fluid?
<div class="container-fluid">
<div class="row">
...
</div>
</div>
EDIT
I think I understand now (really hard from such a small screen shot and no code example).
The button(s) is wider than the column when in narrow viewports and you want that column only to remain wider.
Unfortunately, not how it's designed. Each column is a particular % of the full container width - nothing to do with the columns' content.
Depending on your browser support, Flexbox is the perfect solution here.
Otherwise, you will have to do something like:
<div class="col-sm-6 col-md-4"> <span> col 1 with buttons <span> </div>
<div class="col-sm-3 col-md-4"> <span> col 2 <span> </div>
<div class="col-sm-3 col-md-4"> <span> col 3 <span> </div>
To force the first column wider for the sm viewport.
two ways you can do it
1.give just call table responsive class for the table.
2.create an table using div with display: table, display: table-row, display: table-cell properties
http://www.html-cleaner.com/
I think it will do the trick for you.
Else share the code then i can look in deep into it
I am trying to horizontally align 3 columns (Bootstrap) that have variable heights depending on the size of the view port. As seen on the first picture, everything is centered and aligned on large screens.
When the viewport becomes smaller, the paragraph's height changes and the alignment is lost. I would like to keep the headings (blue), paragraphs, and buttons aligned.
My inital thought was to create three rows for the three different types of elements. Unfortunately I will not be able to do that since I want to keep the border in the middle column.
What would be a correct way of keeping alignment of these three columns regardless of the viewport size?
I've never really seen a perfect answer to this, thats not with javascript, I can't remember the exact code, however, last time i did it, i placed the text in a nested section, each boxes text section had the same class, and i assigned a min-height to that class that was long enough that it fitted the longest piece of text in, then place the button underneath that section.
If you put your code in a JSFiddle i can help you more, however,
it should looks something like this, layout wise,
<div class="four columns">
<img></img>
<div class="text"> this will have a min height
</div>
<input>button here</input>
</div>
I hope this helps, i know it doesn't seem very clear, if you have a live version or a JSfiddle i'm more than happy to help further.
as for the text, you're very limited, there is some very good jquery scripts, just look through http://www.unheap.com
and just have general play with text sizes
Assuming they are in an inline containe vertical-align:middle;
I'm building a site in Zurb's Foundation 4. And I have a row that has two columns. The left column is a paragraph and the right column is an image. When I reduce the browser to mobile dimensions so that the layout will collapse to one column I would like the right div, the image, to be ABOVE the left div, the paragraph, when it transforms to one column.
By default the image is going to fall below the paragraph since the div is later in the order.
Thanks!
Foundation has push and pull classes you can use for this. In your situation, you would set it up like:
<div class="row">
<div class="large-6 push-6 columns">Image</div>
<div class="large-6 pull-6 columns">Text from paragraph</div>
</div>
You can find out more on this by reviewing the docs at http://foundation.zurb.com/docs/components/grid.html and look for 'Source Ordering'