CSS CSS Layout Basics CSS Layout Project Column Layout with Media Queries

kingsley Emeka
seal-mask
.a{fill-rule:evenodd;}techdegree
kingsley Emeka
Full Stack JavaScript Techdegree Student 15,274 Points

3 columns on same line

On large device, (min-width:1025px) The secondary, primary and tertiary content all appear on the same line(not stacked on top of each other) how was this achieved?

1 Answer

Mark Ramos
Mark Ramos
18,157 Points

At the beginning of the video, Guil floats the columns so they appear side-by-side. Remember that @media (min-width: 769px) also applies to @media (min-width: 1025px) except where styles have been overridden. In @media (min-width: 769px) he gives .primary and .secondary a width of 50% to make them fit on one line, and in @media (min-width: 1025px) he overrides those widths by giving all 3 columns a width equaling 100% to fit on one line.