michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

fix cover image on mobile

Browse source
This commit is contained in:
Fred K. Schott 2021-06-08 13:04:49 -07:00
parent f3ce87a84b
commit 9afa92d0c1
1 changed files with 10 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
www/src/components/BlogPost.astro
View file

@ -11,7 +11,7 @@ export let heroImage: string;
<article class="content"> <article class="content">
<div> <div>
<header> <header>
{heroImage && <img width="720" height="480" class="hero-image" loading="lazy" src={heroImage} />} {heroImage && <img width="720" height="420" class="hero-image" loading="lazy" src={heroImage} />}
<p class="publish-date">{publishDate}</p> <p class="publish-date">{publishDate}</p>
<h1 class="title">{title}</h1> <h1 class="title">{title}</h1>
<Author authorId={author} /> <Author authorId={author} />
@ -31,6 +31,15 @@ export let heroImage: string;
margin-bottom: 4rem; margin-bottom: 4rem;
max-width: 1280px; max-width: 1280px;
} }
@media (max-width: 50em) {
.hero-image {
height: 260px;
margin-top: 0;
margin-bottom: 2rem;
}
}
.content { .content {
margin-bottom: 8rem; margin-bottom: 8rem;
} }