This is why starting mobile first approach is preferred. You don't have to do anything fancy. You don't have to worry about layout too much.
Start with generic stuff and then the typography first. After that, We can get start getting a little bit more specific.
/* Generic Stuff*/
*, *::before, *::after {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Roboto, San-Serif;
font-size: 1.125rem;
line-height: 1.6;
}
img {
/* The reason we set max width of a hundred percent and not just a width of 100% is because that means they will
shrink if there's not enough room, but it won't stretch them. If we just set a regular width of 100% on them, if it's a small image, when they get to big sizes,they're going to get pixelated and they're
not going to look super great*/
max-width: 100%;
}
h1, h2 {
margin-top: 0;
/* Start with typography first, don't worry about layout too much */
.intro {
background: #F3EED9;
text-align: centre;
padding: 2em 0;
color: #824936;
}
.intro__text {
}
There are exceptions. There are things that are more complicated, like in navigation,
This is why starting mobile first approach is preferred. You don't have to do anything fancy. You don't have to worry about layout too much.