using next/og why justifyContent: space-evenly is invalid ? #11195
Unanswered
ullaskunder3
asked this question in
General
Replies: 1 comment 1 reply
-
return new ImageResponse(
<div style={{display: "flex"}}>
<div style={{ display: "flex", flexDirection: "column", alignItems: "center", fontSize: "6rem" }}>
<div style={{ textAlign: "center", display: "flex" }}>
<span style={{ fontSize: "8rem", transform: "translate(0.5px, 1px) rotate(12deg) scale(1.1)" }}>B</span><br />
<span style={{ fontSize: "8rem", transform: "rotate(4deg) translateY(19px)", color: "tomato" }}>G</span>
</div>
<div style={{ textAlign: "center", display: "flex" }}>
<span style={{ fontSize: "8rem", transform: "translate(17px, -27px) rotate(-5deg)", color: "cornflowerblue" }}>L</span><br />
<span style={{ fontSize: "8rem", transform: "translate(18px, -2.5px) rotate(12deg)" }}>O.</span>
</div>
</div>
<div style={{display: "flex", flexDirection: "column", justifyContent: "space-around"}}>
<div>
<span style={{ fontSize: "small" }}>BLOG POST</span>
<h3 style={{ fontSize: "3rem", fontWeight: "bold" }}>Lorem ipsum dolor sit amet.</h3>
</div>
<div>
<div style={{ color: "#2d2f33", fontSize: "x-small", fontWeight: "medium" }}>
<p>by ullaskunder.tech</p>
<p>ullaskunder3@gmail.com</p>
</div>
</div>
</div>
</div>
); I just changed the value from space-evenly to space-around but now its throwing different error:
|
Beta Was this translation helpful? Give feedback.
1 reply
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Description
Report: Issue with
justifyContent
Property in Inline CSSSummary:
There is an issue encountered while using the
justifyContent
property in inline CSS within a Next.js application. The error arises from an attempt to set thejustifyContent
property to"space-evenly"
, which is not recognized as a valid value by the system.This happened while I was trying to generate og
import { ImageResponse } from "next/og";
export const runtime = "edge";
Error Message:
verbose:
Impact:
This issue impacts the rendering of the component or layout where the
justifyContent
property is applied. As a result, the intended layout or alignment may not be achieved, leading to potential visual inconsistencies or errors in the application.Proposed Solution:
To address this issue, the
justifyContent
property should be set to one of the valid values listed in the error message:"center"
"flex-start"
"flex-end"
"space-between"
"space-around"
Example:
Your insights and assistance in resolving this issue are greatly appreciated. Thank you.
Beta Was this translation helpful? Give feedback.
All reactions