0
300
ViewsCSS Rendering in react is different than in static web
I have a react app that based on a static website. Afterwards, I took a little bit different kind of css rendering between them. e.g:
on the static website:
<html>
<body>
...
<div class="title">
<div class="left">
<h2>What's</h2>
<h3>Lorem Ipsum?</h3>
</div>
<div class="right">
<div class="white-lines"></div>
</div>
</div>
<p>Lorem ipsum ... </p>
...
</body>
</html>
on the react app:
import React from "react";
import Header from "../components/Header";
import '../style/index.css'
function Home() {
return (
<>
...
<div className="title">
<div className="left">
<h2>What's</h2>
<h3>Lorem Ipsum ? </h3>
</div>
<div className="right">
<div className="white-lines"></div>
</div>
</div>
<p>Lorem ipsum ... </p>
...
</>
)
}
I had already make sure that both is using the same CSS style, it looks like (complete css file you can access here):
.about .title {
display: flex;
column-gap: 50px;
padding: 0;
}
When both are inspected with browser devtools, here is the comparison:
Is there a mistake about importing css or any other?I want to make that in react app will looks like at a static website
·
Juan Pablo Isaza
Answer question