![]() ![]() ![]() 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. ![]()
0 Comments
Leave a Reply. |