0

desktop:

enter image description here

mobile devices:

enter image description here

Hello I have a problem my text is passing my maximum height I would like my container to follow the height and that my text has maximum width of my container my text

code:

<div className="App"> <div class="wrapper"> <div className="text"> <div class="card-info"> <div class="card-about"> <a class="card-tag tag-news">NEWS</a> <div class="card-time">6/11/2018</div> </div> </div> <h3 className="textxd">dasssssssssssssssss</h3> <p className="textxd"> aaaaaaaaaaaaa dasuhdasudhu dasuhduashu aaaaaaaaaaaaa dasuhdasudhu dasuhduashu aaaaaaaaaaaaa da aaaaaaaaaaaaa dasuhdasudhu dasuhduashu aaaaaaaaaaaaa dasuhdasudhu dasuhduashu aaaaaaaaaaaaa dasuhdasudhu dasuhduashu aaaaaaaaaaaaa dasuhdasudhu dasuhduashusuhdasudhu dasuhduashu aaaaaaaaaaaaa dasuhdasudhu dasuhduashu </p> </div> </div> </div>

css:

.App { padding: 20px; font-family: sans-serif; text-align: center; background: red; height: 40vh; } .wrapper { display: flex; flex-direction: column; justify-content: space-between; height: 30vh; max-height: 30vh; border-radius: 10px; cursor: pointer; background:blue; } .textxd { margin-top: 10px; margin-bottom: 5px; } .text { height: 100%; max-height: 30vh; padding: 0.15rem 1.25rem; color: white; transition: all 0.3s ease-in; ${({ isHover }) => isHover && ` color:black; transition: all 0.3s ease-in; `} } .card-about { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 0; } .card-tag { width: 60px; max-width: 100px; padding: 0.2rem 0.5rem; font-size: 12px; text-align: center; text-transform: uppercase; letter-spacing: 1px; background: #ffab00; color: #fff; } .card-info { position: relative; }

I do not know how I could solve this I would need to leave my container and responsive text that my container follows the height of the text or that the text has a maximum height

Improve this question
2
  • 2
    if you want the height to adjust, just remove the fixed height value. Commented Feb 14, 2020 at 12:30
  • remove the max-height for mobile screen. use media queries Commented Feb 14, 2020 at 12:36

3 Answers 3

Reset to default
1

If you want the class wrapper with the same height, then use overflow: scroll. like this -->

.wrapper { ... overflow : scroll; }

OR Else use height : auto; 

.wrapper { ... height : auto; }
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

Just set height auto on mobile devices like this

@media only screen and (max-width: 600px) { .wrapper { height: auto; max-height: auto; } }
Improve this answer

Comments

0

try This.added max-width to your div .class attribute was also given wrong as className

.App { padding: 20px; font-family: sans-serif; text-align: center; background: red; } .wrapper { display: flex; flex-direction: column; justify-content: space-between; border-radius: 10px; cursor: pointer; background:blue; } .textxd { margin-top: 10px; margin-bottom: 5px; } .text { height:auto; max-width:100px; padding: 0.15rem 1.25rem; color: white; transition: all 0.3s ease-in; ${({ isHover }) => isHover && ` color:black; transition: all 0.3s ease-in; `} } .card-about { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 0; } .card-tag { width: 60px; max-width: 100px; padding: 0.2rem 0.5rem; font-size: 12px; text-align: center; text-transform: uppercase; letter-spacing: 1px; background: #ffab00; color: #fff; } .card-info { position: relative; }
<div class="App"> <div class="wrapper"> <div class="text"> <div class="card-info"> <div class="card-about"> <a class="card-tag tag-news">NEWS</a> <div class="card-time">6/11/2018</div> </div> </div> <h3 className="textxd">dasssssssssssssssss</h3> <p className="textxd"> aaaaaaaaaaaaa dasuhdasudhu dasuhduashu aaaaaaaaaaaaa dasuhdasudhu dasuhduashu aaaaaaaaaaaaa da aaaaaaaaaaaaa dasuhdasudhu dasuhduashu aaaaaaaaaaaaa dasuhdasudhu dasuhduashu aaaaaaaaaaaaa dasuhdasudhu dasuhduashu aaaaaaaaaaaaa dasuhdasudhu dasuhduashusuhdasudhu dasuhduashu aaaaaaaaaaaaa dasuhdasudhu dasuhduashu </p> </div> </div> </div>

Improve this answer

Comments