All Questions
Tagged with grid-layout responsive-design
77
questions
189
votes
5
answers
221k
views
Grid of responsive squares
I'm wondering how I would go about creating a layout with responsive squares. Each square would have vertically and horizontally aligned content. The specific example is displayed below...
- 12.2k
37
votes
6
answers
38k
views
Change the order of col-*-12 columns in Bootstrap using push/pull
I have two columns of the same size (.col-xs-12) and I would change their place when the screen size correspond to that of a mobile device. I would place them in the reverse order.
I have read that ...
- 13.8k
33
votes
3
answers
112k
views
min-width for column in Bootstrap grid system [duplicate]
I have following HTML with Bootstrap CSS.
<div class="row">
<div class="col-sm-4" style="min-width: 66px;">Name</div>
<div class="col-sm-1" style="min-width: 120px;">...
- 1,995
21
votes
10
answers
38k
views
Mosaic of images HTML/CSS
I want to make an image layout with portrait images inside a div with a fixed aspect ratio of 3:2. The size of images is 327x491px.
The main issue is unwanted spaces between images. How do I align ...
- 2,314
15
votes
1
answer
7k
views
Responsive Grid Layout Framework [closed]
I want an easy to use grid framework for my current web project. These are the features i would appreciate:
fluid grid layout: boxes that can be aligned horizontally (side by side), each having the ...
6
votes
2
answers
23k
views
Create a 4x4 responsive grid of squares with a margin of 20px on each side of the container? [duplicate]
I want to create a grid of responsive 4x4 squares with a margin of exactly 20px on the left and right sides of the overall container. Furthermore, this would effectively eliminate the left margin on ...
- 8,357
6
votes
1
answer
3k
views
How to make a CSS GRID, with uneven column widths, responsive?
I have created a CSS GRID and each row has 2 columns. The first column takes up 25% of the width and the second column takes up 75%. I have achieved this using
.grid-container{
...
- 93
5
votes
8
answers
8k
views
Items grid with inner padding only
What techniques are there for creating a products grid that has padding between each item, but only within the grid? For example, what I am trying to achieve is the below:
Sample markup:
<div id="...
- 5,340
5
votes
3
answers
7k
views
Responsive 4 box grid from two to one columns
I'm a beginner in css and I have a little problem. I tested different methods to handle a responsive 4 div grid with css, and I failed.
I want to responsively arrange the 4 divs as an grid with 2 ...
- 53
5
votes
3
answers
4k
views
CSS Responsive grid 1px gap issue
I am working on a responsive grid system for a project. The grid is made up of blocks which are floated left and have a width of 25%.
Inside these block are are images which are set to either 100% *...
- 441
4
votes
1
answer
4k
views
How to swap grid positions (materializecss) on different devices?
I'm building a website using MaterializeCSS
I have two boxes:
A (col s12 m8 l8)
B (col s12 m4 l4)
<div class="container">
<div class="row">
<!-- Box A -->
<...
- 113
4
votes
3
answers
6k
views
Bootstrap layout on lower resolution
I have the following code:
<div class="row">
<div class="col-sm-2">
<input style="width:100%" >
</div>
</div>
And Fiddle:
Sample
On my default resolution: ...
- 4,725
4
votes
1
answer
4k
views
Responsive Grid Layout - Dashboard Style - 100% height&width container
Am looking to make this a pure responsive css grid for 11 html divs.
<div class="dashboard page-container">w100%, h100%
<div class="box1">w20%, h25%</div>
<div class="...
- 883
4
votes
1
answer
2k
views
Making responsive grid elements fit by height
I'm trying to get my head around working with responsive webdesign (by column stacking) and I'm currently using this grid for my layouts: http://www.responsivegridsystem.com/ which I think works quite ...
- 3,376
4
votes
2
answers
2k
views
CSS - Responsive grid with equal margins and fixed size blocks
I'm trying to push the limits of CSS to replicate what would be a common grid-layout in print.
Requirements :
Margins between blocks and between blocks and edge of the container must be equal.
The ...
- 1,708
3
votes
1
answer
3k
views
Responsive Segment Layout with React Semantic UI
I have a challenge adding CSS gutters to Semantic-UI grids. I have one Grid column with a segment that's being rendered repeatedly.
Here's my code:
import React from 'react';
import ReactDOM from '...
- 2,928
3
votes
1
answer
1k
views
Responsive Grid Layout Portrait-orientation Dashboard 100%h&w CSS?
I have a dashboard for @media (orientation: landscape) { that I would like to make a @media (orientation: portrait) { version of..
Here's the landscape: http://jsfiddle.net/FhKEx/
And here's the ...
- 883
3
votes
2
answers
1k
views
How to position multiple screen filled (responsive) DIV's?
I'm working on this for a couple of days but can't figure out how to do this properly. I want to have a website that contains 25 images. Now, every image should be screen filling, and therefore be ...
- 85
3
votes
1
answer
4k
views
Fixed width items in a responsive grid?
I have fixed width elements that I'd like to make a grid of. The only issue is that I want it to be responsive. Basically have as many items as it can have in one row, and then move the item to the ...
- 2,418
3
votes
2
answers
526
views
Layout tiles with variable sizes without tables, filling available space
I want to create a page layout that resembles the following
############ ##### ##### #####
############ ##### ##### #####
############ ##### ##### #####
############
############ ##### ###...
- 2,410
2
votes
1
answer
7k
views
Foundation 4 responsive grid layout for large screens
I've used compass to create new sass project with zurb foundation 4 framework. My screen.scss file looks following:
// Reset and normalization settings
@import "normalize";
// Global Foundation ...
- 4,311
2
votes
4
answers
2k
views
Keep aspect ratio of divs inside a grid [duplicate]
I am creating memory game. I am using 24 cards in aspect of 6:4, i e. 4 rows with six cards in each row.
Here is picture what i want to achieve and what I have on my screen resolution:
And here is ...
- 901
2
votes
3
answers
13k
views
Grid layout with images
I'm trying to build this grid layout for images with HTML and CSS.
I would like to use divs rather than table but I'm not sure what's the best way to go. Also I need to put a short description below ...
- 245
2
votes
4
answers
1k
views
How to Create Responsive Web Page With Static Header?
I'm real happy with the header I just created:
But unfortunately, the goal of this project is to create a responsive website using rows and columns. We were instructed to use a 12 column grid system. ...
- 4,081
2
votes
1
answer
4k
views
Bootstrap grid - columns first?
I'm fairly new to Bootstrap and have come across a problematic task that I first thought would be pretty simple. And maybe it is for someone with sufficient experience of Bootstrap.
If I have a row ...
- 307
2
votes
4
answers
2k
views
getting the height of a div to match the width when it shrinks responsively
In the jsfiddle here http://jsfiddle.net/H3VW5/ I have 3 divs where the width is based on perencentage. Is there a simple way (without having an image in it) to get the height to match a certain ...
- 311
2
votes
1
answer
2k
views
How can I make tables respect the grid in Bootstrap 3?
Bootstrap tables do not respect the grid even if they have col-xs-X classes defined.
Here's a minimal example that shows how the (red) table doesn't line up with the (gray) grid: http://jsfiddle.net/...
- 1,077
2
votes
4
answers
1k
views
Bootstrap 3 ordering column into same row in responsive layout
I' m developing a responsive layout but I have problems to sort columns.
I can´t sort columns within a single row.
<div class="row">
<div class="well col-sm-8" style="background-color: red"&...
- 436
2
votes
1
answer
2k
views
How to create an easy responsive grid with one column and two boxes?
I want to create a CSS grid (without using any external library) where I have two columns. The first column contains one box. The second column contains two boxes.
The box in the first/left column ...
- 9,514
2
votes
0
answers
109
views
Responsive images in columns
I have a generally problem with responsive images: The websites I create often have two to four columns. When I have a three or four column grid with an image in every column, the images are very ...
- 753
1
vote
2
answers
4k
views
How can I add extra column classes in Bootstrap 3?
Bootstrap 3 changed the previous approach of span classes for the grid system for the more explicit col-xs, col-md, etc. An excellent improvement imo, but still I find that I would like to add extra ...
- 671
1
vote
2
answers
14k
views
Bootstrap cards/thumbnails not lining up side by side correctly in the grid system & card deck
I'm having a problem with getting Boostrap's thumbnails & cards to line up side by side in their grid system. Basically, this is an assignment & I have to follow certain parameters:
-must use ...
- 37
1
vote
1
answer
207
views
ResponsiveGridSystem 1.6% = 20px: Why?
I'm looking into using the ResponsiveGridSystem and on the site they have the following information regarding column margins:
A margin of 1.6% gives you about 20 pixels on a standard monitor, but ...
- 9,272
1
vote
1
answer
2k
views
Responsive thumbnail grid equal spacing
I have a grid of thumbnails:
.thumbnail-container {
border: 1px solid red;
float: left;
width: 25%; (depending on screen size)
}
.thumbnail {
display: block;
...
- 468
1
vote
1
answer
611
views
Align bootstrap columns in left-right-left order
I dont know how to start this question, I want make this grid with bootstrap but I cant do the following:
Dekstop mode
+-----------------+------------------------------+
| content1 | ...
- 199
1
vote
1
answer
2k
views
Bootstrap 3 RC1: Column Ordering
I have two primary boxes: an 8-col wide box with a bunch of panels and a second, 4-col (offset-1) to the right as a sidebar.
I want to push the sidebar on top of the box o' sidebars on small screens. ...
- 23.7k
1
vote
2
answers
4k
views
CSS Grid collapse element when resizing and make disappear
I have a row of 3 columns.
When I resize the page I would like the elements to keep their width but if any element cant fit the adjusted screen size then I would like it to drop down to the next row.
...
user12414493
1
vote
2
answers
2k
views
Create custom grid system width defined column widths
The bootstrap 3 grid system targets 4 different screen resolutions, depending on their width:
Large / col-lg (>= 1200px width)
Medium / col-md (992px - 1199px)
Small / col-sm (768px - 991px)
Extra ...
- 24.2k
1
vote
1
answer
2k
views
Nesting rows in zurb Foundation grid
I am new to working with Zurb Foundation 5. I am trying to build a complex header bar using the columns and rows. However, I want to use nested rows within a main row.
Is this possible with ...
- 147
1
vote
2
answers
3k
views
Grid columns do not fill parent container
I have a grid layout using Bootstrap 3, with rows containing varying numbers of columns. My expectation of the grid behaviour is that the margin between column items would change as the parent ...
- 11.3k
1
vote
1
answer
673
views
How Do You Anchor Multiple Child Elements to the Bottom of a Parent Element in a Responsive Design?
I have a parent element that has Bootstrap 3's .row CSS class. Within this element are two child elements (each with a Bootstrap column class), one of which has a varying height depending on the data ...
- 15
1
vote
1
answer
42
views
Can't get react to render my css grid layout responsively
I am trying to make a grid for a chess game. 8x8 with 64 squares.
I want the grid to expand and shrink depending on the screen size. I can easily achieve the desired behavior using basic html and a ...
- 11
1
vote
2
answers
464
views
How to write media query for this grid layout
I want to use media queries on a grid layout below for smaller screens like mobile and tablet but it doesn't apply properly when I try to use them. the full code for the grid layout page can be found: ...
- 400
1
vote
2
answers
3k
views
Responsive grid with columns of same height
I'm struggling with what should be a simple layout problem
I have a layout with 4 headline boxes.
The 4 boxes need to be the same height when 4 across ("deskop" view).
They also need to be the same ...
- 528
1
vote
1
answer
4k
views
Bootstrap Squared Columns for Tic-Tac-Toe Board?
I am building a Tic-Tac-Toe interface, currently using HTML, CSS, and Bootstrap. I'm trying to get the board to be perfectly squared (1:1) but I'm getting nowhere.
The boxes have to be taller so ...
- 2,525
1
vote
1
answer
1k
views
Setting up a 2-Column Grid Bootstrap
Hello I am trying to develop an alternating two column grid layout with bootstrap, where there would be one image on the lefthand size of the screen, then reverse down the web page until the end user ...
1
vote
2
answers
5k
views
Responsive Grid Layout with background image
I want to make grid layout with images as background.I want 2 column and 2 row grid but with different heights and widths. It should be responsive and when we resize the window or screen, the grid and ...
- 97
1
vote
0
answers
102
views
how can I adapt a bootstrap carousel to contain a form while remaining responsive (code example inside)
I have modified a carousel to contain a form and i'm having trouble getting things laid out the way I want in the grid.
Bootply
If you load this on a computer the layout is looking the way i want, ...
- 13
1
vote
2
answers
178
views
Make an image grid centre responsively
I have an image grid that is made up of a whole lot of divs, within each div is a heading, a small picture and a description. When the grid is at the maximum width, everything sits in it centred. When ...
- 11
1
vote
3
answers
147
views
Bootstrap - constructing a fluid grid
I have a number of items that I want to display 4 across on a large screen, 3 across on a smaller screen, two across on smaller and so on.
I have each group of 4 elements in a row with each having ...
- 53