Row 2 that spans 3 columns - example use as Horizontal menu
Home

3 Column 4 Row Responsive Template

In this example using GRID and media queries, there is a header, a navigation row, three columns and a footer.

On smaller screens, the columns will stack on top of each other.

Resize the browser window to see how the layout changes using media queries to get the responsive effect.

"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.


Common breakpoints for widths of devices:
320px — 480px: Mobile devices.
481px — 768px: iPads, Tablets.
769px — 1024px: Small screens, laptops.
1025px — 1200px: Desktops, large screens.
1201px and more — Extra large screens, TV.


Use pre code to display the HTML & CSS code in a web page to others.

Use HTML Formatter to indent the code.

Blnk

Validated CSS


Valid CSS!

Valid CSS!



Left Column

"Lorem ipsum dolor sit amet, elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Img2

Right Column

"Lorem ipsum dolor sit amet, elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Img3