How do you make a format with footage down one aspect of a web page matched up with paragraphs on the opposite aspect?

No Comments

I obtained this precise query in an e mail the opposite day, and I believed it could make a pleasant weblog submit due to how splendidly satisfying that is to do in CSS nowadays. Plus we are able to sprinkle in polish to it as we go.

HTML-wise, I’m considering picture, textual content, picture, textual content, and many others.

<img src=”…” alt=”…” top=”” width=”” />
<p>Textual content textual content textual content…</p>

<img src=”…” alt=”…” top=”” width=”” />
<p>Textual content textual content textual content…</p>

<img src=”…” alt=”…” top=”” width=”” />
<p>Textual content textual content textual content…</p>

If that was our complete physique in an HTML doc, the reply to the query within the weblog submit title is actually two strains of CSS:

physique {
show: grid;
grid-template-columns: min-content 1fr;
}

It’s going to look one thing like this…

Not fairly however we obtained the job completed in a short time.

So cool. Thanks CSS. However let’s clear it up. Let’s make certain there’s a hole, set the default kind, and reign within the format.

physique {
show: grid;
padding: 2rem;
grid-template-columns: 300px 1fr;
hole: 1rem;
align-items: middle;
max-width: 800px;
margin: 0 auto;
font: 500 100%/1.5 system-ui;
}
img {
max-width: 100%;
top: auto;
}

I imply… ship it, proper? Shut, however perhaps we are able to simply add a fast cell type.

@media (max-width: 650px) {
physique {
show: block;
font-size: 80%;
}
p {
place: relative;
margin: -3rem 0 2rem 1rem;
padding: 1rem;
background: rgba(white, 0.8);
}
}

OK, NOW ship it!

CodePen Embed Fallback

The submit How do you make a format with footage down one aspect of a web page matched up with paragraphs on the opposite aspect? appeared first on CSS-Methods. You possibly can assist CSS-Methods by being an MVP Supporter.

    About Marketing Solution Australia

    We are a digital marketing company with a focus on helping our customers achieve great results across several key areas.

    Request a free quote

    We offer professional SEO services that help websites increase their organic search score drastically in order to compete for the highest rankings even when it comes to highly competitive keywords.

    Subscribe to our newsletter!

    More from our blog

    See all posts

    Leave a Comment