🎨 styles: change img recipe to img common

:%s
This commit is contained in:
lytrankieio123
2021-09-13 14:04:00 +07:00
parent 6cdad60b0a
commit d191ffc535
2 changed files with 17 additions and 10 deletions

View File

@@ -2,13 +2,16 @@
.recipeDetailInfo {
@apply spacing-horizontal;
margin: 5.6rem auto;
margin: 0 auto 5.6rem;
@screen md {
@apply flex;
margin: 5.6rem auto;
}
.img {
width: fit-content;
width: 100%;
margin-top: 0;
min-height: 50rem;
@screen sm-only {
margin-bottom: 2rem;
@@ -16,13 +19,16 @@
@screen lg {
max-width: 60rem;
}
img {
@apply w-full;
object-fit: contain;
max-height: 64rem;
border-radius: 2.4rem;
@screen md {
max-height: 90rem;
> div {
min-height: 64rem;
img {
// object-fit: contain;
// @apply w-full;
min-height: 64rem;
border-radius: 2.4rem;
// @screen md {
// max-height: 90rem;
// }
}
}
}

View File

@@ -1,4 +1,5 @@
import React from 'react'
import { ImgWithLink } from 'src/components/common'
import RecipeBriefInfo from '../RecipeBriefInfo/RecipeBriefInfo'
import s from './RecipeDetailInfo.module.scss'
@@ -12,7 +13,7 @@ const RecipeDetailInfo = ({ }: Props) => {
return (
<section className={s.recipeDetailInfo}>
<div className={s.img}>
<img src="https://user-images.githubusercontent.com/76729908/131634880-8ae1437b-d3f8-421e-a546-d5a4f9a28e5f.png" alt="Recipe" />
<ImgWithLink src="https://user-images.githubusercontent.com/76729908/131634880-8ae1437b-d3f8-421e-a546-d5a4f9a28e5f.png" alt="Recipe" />
</div>
<div className={s.recipeInfo}>
<div className={s.top}>