Responsive Web Design Four Corners

Responsive Web Design Four Corners

Website is structured into four corners. Each corner shows a different tool of responsive web design used.

Media Queries

The media queries size shows the websites adaptability to different screen widths. The four corners stay present in a large window, but if adjusted by changing window size changes to columns.

Scalable Images

The scalabale image corner shows this image of spongebob, and how the image is properly scaled due to the window size. This is done by utlizing max and min width.

Landscape scene demonstrating scalable image responsiveness

Flexbox

This corner shows flexboxes which show how these two text buttons change to shrink and grow in the horizontal direction based on the window size.

Example
Example

CSS Grid

The CSS grid corner is made to show how the four corners of the whole page works.

Example 1
Example 2