Проблема создания адаптивного контейнера с гибкой компоновкой, в основном я ищу это:
но я получил это на мобильных устройствах:
Я не могу заставить реагировать на мобильных устройствах все странное, и я думаю, что мой код был огромен для чего-то маленького:
export default function App() {
return (
<div
style={{
background: "none",
height: "100%",
margin: "0 auto",
maxWidth: "80rem",
paddingRight: "10px",
paddingLeft: "10px"
}}
>
<NewsFlex>
<div className="on_action_left">
<div className="title">
<p className="text-title">act</p>
</div>
<div className="content-header">
<h3 className="content-text" style={{ color: "#fff" }}>
aaaaaaaaaaaaaaaaaaaaaaaaaa
</h3>
<p className="date-text" style={{ color: "#fff" }}>
<span>icon</span>
11 de Fevereiro de 2020
</p>
</div>
</div>
<div className="on_action_right">
<div id="on_action_cards top">
<div className="title">
<p className="text-title">act</p>
</div>
<div className="content-header">
<h3 className="content-text" style={{ color: "#fff" }}>
bbbbbbbbbbbbbbbbbbbbbb
</h3>
<p className="date-text" style={{ color: "#fff" }}>
<span>icon</span>
11 de Fevereiro de 2020
</p>
</div>
</div>
<div id="on_action_cards bottom">
<div className="bottom_left_card">
<div className="title">
<p className="text-title">act</p>
</div>
<div className="content-header">
<h3 className="content-text" style={{ color: "#fff" }}>
Ebbbbbbbb
</h3>
<p className="date-text" style={{ color: "#fff" }}>
<span>icon</span>
11 de Fevereiro de 2020
</p>
</div>
</div>
<div className="bottom_right_card">
<div className="title">
<p className="text-title">act</p>
</div>
<div className="content-header">
<h3 className="content-text" style={{ color: "#fff" }}>
dasssss
</h3>
<p className="date-text" style={{ color: "#fff" }}>
<span>icon</span>
11 de Fevereiro de 2020
</p>
</div>
</div>
</div>
</div>
</NewsFlex>
</div>
css:
const HeaderKeyFrame = keyframes`
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
`;
const FlexColumn = css`
display: flex;
flex-direction: column;
align-items: center;
`;
const FlexRowCenter = css`
display: flex;
align-items: center;
`;
const NewsFlex = styled.div`
${FlexRowCenter}
width: 100%;
height: 70vh;
margin-top: 40px;
padding: 0 25px;
& .on_action_left {
${FlexColumn}
cursor:pointer;
align-items: flex-start;
padding: 40px;
justify-content: flex-end;
border-radius: 5px;
width: 500px;
background: yellow;
-webkit-box-shadow: inset 200px -200px 5px 400px rgba(0, 0, 0, 0.32);
-moz-box-shadow: inset 200px -200px 5px 400px rgba(0, 0, 0, 0.32);
box-shadow: inset 200px -200px 5px 400px rgba(0, 0, 0, 0.32);
height: 100%;
margin-right: 2px;
}
& .on_action_right {
${FlexColumn}
width: calc(100% - 500px);
height: 70vh;
& > div:nth-child(1) {
${FlexColumn}
cursor:pointer;
align-items: flex-start;
padding: 20px 20px;
justify-content: flex-end;
border-radius: 5px;
-webkit-box-shadow: inset -200px -200px 5px 200px rgba(0, 0, 0, 0.32);
-moz-box-shadow: inset -200px -200px 5px 200px rgba(0, 0, 0, 0.32);
box-shadow: inset -200px -200px 5px 200px rgba(0, 0, 0, 0.32);
background: green;
width: 100%;
height: 200px;
margin-bottom: 2px;
}
& > div:nth-child(2) {
${FlexRowCenter}
justify-content:space-between;
width: 100%;
height: 50%;
padding: 0;
margin: 0;
}
& .bottom_left_card {
${FlexColumn}
cursor:pointer;
align-items: flex-start;
padding: 20px 20px;
justify-content: flex-end;
width: 100%;
height: 100%;
border-radius: 5px;
background: blue;
-webkit-box-shadow: inset -200px -200px 5px 200px rgba(0, 0, 0, 0.32);
-moz-box-shadow: inset -200px -200px 5px 200px rgba(0, 0, 0, 0.32);
box-shadow: inset -200px -200px 5px 200px rgba(0, 0, 0, 0.32);
margin-right: 1px;
}
& .bottom_right_card {
${FlexColumn}
cursor:pointer;
align-items: flex-start;
padding: 20px 20px;
justify-content: flex-end;
width: 100%;
height: 100%;
border-radius: 5px;
background: red;
-webkit-box-shadow: inset -200px -200px 5px 200px rgba(0, 0, 0, 0.32);
-moz-box-shadow: inset -200px -200px 5px 200px rgba(0, 0, 0, 0.32);
box-shadow: inset -200px -200px 5px 200px rgba(0, 0, 0, 0.32);
margin-left: 1px;
}
}
& .text-title {
border-radius: 5px;
font-family: "Roboto", sans-serif;
font-size: 12px;
font-weight: 500;
text-transform: uppercase;
display: inline-block;
margin: 0 0 5px 0;
padding: 3px 7px;
line-height: 13px;
pointer-events: auto;
background-position: top center;
background: linear-gradient(-45deg, #009ffd, #2a2a72);
animation: ${HeaderKeyFrame} 5s ease infinite;
background-size: 150% 100%;
color: #fff;
}
& .content-text {
max-width: 250px;
text-align: left;
font-size: 1.07692308rem !important;
font-family: Roboto Slab, serif;
font-weight: 400;
}
& .date-text {
max-width: 250px;
text-align: left;
margin-top: 10px;
font-size: 0.6692308rem !important;
font-family: sans-serif, serif;
letter-spacing: 0.1em;
font-weight: 400;
& > span {
margin-right: 5px;
}
}
`;
пример по коду:
https://codesandbox.io/s/blazing-sky-3zmrq