article list responsive on tablet bootstrap studio

ARTICLE LIST RESPONSIVE ON TABLET BOOTSTRAP STUDIO HOW TO

ARTICLE LIST RESPONSIVE ON TABLET BOOTSTRAP STUDIO HOW TO

The goal here was to provide some guidance on how to use grids in responsive design. I’m pretty sure Instagram can get away with 6 thick columns on desktop.

But what happens for when your browser is one pixel smaller, at 1199px? Fixed Grid So right now what you’re seeing is a design with content width of something slightly smaller than 1200px, with a ton of margin because you’re looking with a big monitor. Let’s say for example you have a large monitor that sees things at 1600px wide, your desktop design is at 1200px wide, tablet is at 768px wide, and mobile is at 360px wide. In reality, the web must render for any browser width. These breakpoints are the point of reference in code. If you wanted, you could also get creative and choose to only show one card on mobile, or do a horizontal scroll. On mobile the answer is easy too, you would just show one card, and the rest stacked beneath it. Yay! You didn’t need to do any resizing, because you already knew that it sat on four columns. If a set of three cards sat on 4 columns each on desktop, on tablet you would show two cards and wrap the third one so that it’d show on a second row. Why? And how does that work? This was to make things easier when you designed.

In a traditional design grid, the column widths and gutters stay the same, just the number of columns change.

Article list responsive on tablet bootstrap studio