CODEWITHSUNDEEP
htmlcss
hawaj
hawaj

Reputation: 288

How to prevent my text overflowing and make responsive div?

my text is overflowing see the screenshot https://drive.google.com/file/d/1i_9VvP54CAJJSvtsArZiTMMfMzACDS11/view?usp=sharing

here is css:

.card_main {
  border: 1px solid black;
  margin-top: 30px;
  border-radius: 5px;
  height: 900px;
  background: #ffffff;

  width: 100%;
}
.blog_content__text {
  width: 95%;
  height: 320px;
  border-bottom: 1.5px solid lightgray;
  margin-left: 2.5%;
  margin-top: 20px;
}
.blog_heading {
  font-size: 24px;
  color: black;
}
    .blog_details {
  font-size: 16px;
  color: black;
  opacity: 0.7;
  margin-top: 20px;
}

my html

 <div className="card_main">
     <div className="blog_content__text">
     <h1 className="blog_heading">{data.blog_title}</h1>
     <p className="blog_details">{data.blog_body}</p>
      </div>
<div/>

how to prevent overflowing my text and make the div responsive. I am not an CSS expert. I just start learning css

Upvotes: 0

Views: 1116

Answers (4)

Ali Sheikhpour
Ali Sheikhpour

Reputation: 11055

When using fixed height for a div, you also need to say how the scroll should work. In this case using overflow-y:auto makes sense. You may prefer overflow-y:hidden or always show scrollbars overflow-y:scroll;

If there is no serious limitation in terms of graphics, do not specify the height for a Div to make its height responsive to the content.

.blog_content__text {
  width: 95%;
  height: 320px;

  overflow-y:auto;

  border-bottom: 1.5px solid lightgray;
  margin-left: 2.5%;
  margin-top: 20px;
}

Upvotes: 1

Willy
Willy

Reputation: 21

You can also make use of the following property if you really want to set the height:

height: min-content;

Upvotes: 0

selmanioui
selmanioui

Reputation: 168

try setting a margin-bottom css attribute to the div that contains the text, the value of the margin should equal the height of that white footer that is hiding the text on the bottom.

Upvotes: 0

Itai
Itai

Reputation: 56

remove the height: 320px; if you must, use it as min-height: 320px;

Upvotes: 0

Related Questions