diff --git a/src/components/Billboard/index.tsx b/src/components/Billboard/index.tsx
index e91b95a3a5..3f36121ef6 100644
--- a/src/components/Billboard/index.tsx
+++ b/src/components/Billboard/index.tsx
@@ -7,7 +7,6 @@ import {
BillboardDialog,
BillboardExposureTracker,
Icon,
- Spinner,
TextIcon,
} from '~/components'
@@ -34,7 +33,7 @@ export const Billboard = ({ tokenId, type }: BillboardProps) => {
cacheTime: 60_000,
})
- if (!id || isError || !data || !data.contentURI) {
+ if (!id || isError || isLoading || !data || !data.contentURI) {
return null
}
@@ -43,43 +42,40 @@ export const Billboard = ({ tokenId, type }: BillboardProps) => {
{({ openDialog: openBillboardDialog }) => {
return (
)
}}
diff --git a/src/components/Billboard/styles.module.css b/src/components/Billboard/styles.module.css
index d81e91d866..69a2447310 100644
--- a/src/components/Billboard/styles.module.css
+++ b/src/components/Billboard/styles.module.css
@@ -1,20 +1,34 @@
.billboard {
- display: block;
- max-width: 21.4375rem;
+ max-width: 100%;
+
+ @media (--sm-up) {
+ max-width: 50%;
+ }
+
+ @media (--md-up) {
+ max-width: 100%;
+ }
& a {
@mixin flex-center-all;
- line-height: 0;
+ position: relative;
+
+ &::after {
+ display: block;
+ padding-bottom: 56.06%;
+ content: '';
+ }
& img {
- width: 100%;
- max-height: 10.5rem;
+ @mixin object-fit-cover;
+
border-radius: 1.25rem;
}
}
& .button {
+ margin-top: var(--sp8);
color: var(--color-grey);
}
}