CODEWITHSUNDEEP
cssthemeswordpress-theming
Jamiu Oloyede
Jamiu Oloyede

Reputation: 27

how do i avoid this title from overflowing?

Just playing around by creating a free wordpress theme but i'm stuck as the title of the post seems to overflow when its very long.

Please how can i fix this.

Here is the image showing the error.

enter image description here

The red border is the one that push down the container below it.

Thanks for the help.

CSS

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.posts-not-found {
  border: 2px solid red;
  padding: 20px;
  left: 65px;
  right: 65px;
}
.layerit {
  width: 100%;
  height: 100%;
  padding-top: 150px;
  margin: 0 auto;
  background: rgba(0, 0, 0, .3);
  padding-top: 150px;
  position: relative;
  left: 0;
  bottom: 0;
  right: 0;
  text-align: center;
  transition: background-color .9s ease;
  border: 1px solid white;
}
.navbar a {
  padding-top: 30px;
}
.navbar-brand {
  font-size: 25px;
}
.home-title {
  color: white;
}
#title-text {}
.home-author {
  color: white;
  padding-top: 20px;
  padding-bottom: 20px;
}
.no-margin {
  padding: 0;
  margin: 0;
}

HTML

<?php get_header(); ?>
<div class="row">
<?php
if (!have_posts() ) : ?>
    <div class="posts-not-found">
        <h1>Nothing Found</h1>
            <p>It seems we can’t find what you’re looking for. Perhaps searching can help.</p>
    </div>
<?php endif; ?>

<?php
if ( have_posts() ) { 
while ( have_posts() ) : the_post();
 ?>
<div class="col-md-4 col-sm-6 col-xs-12 no-margin">
    <div class="layerit">
        <h2 id="title-text" ><a class="home-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
            <p class="home-author">by <?php the_author(); ?> on <?php echo get_the_date(); ?> </p>

    </div>
</div><!-- /.blog-post -->

 <?php if ( is_archive() || is_search() ) : // Only display excerpts for archives and search. ?>
            <?php the_title(); ?>

    <?php endif; ?>

 <?php
 endwhile;
}

 ?>
</div>
 <nav>
 <ul class="pager">
 <?php if ($wp_query->max_num_pages > 1 ) : ?>
 <li><?php next_posts_link('Older Posts'); ?></li>
 <li><?php previous_posts_link('Newer Posts'); ?></li>

 <?php else: ?>
        <li>No Newer/Older posts</li>
<?php endif; ?>
</ul>
 </nav>

 <div class="row before-footer-area">
    <hr class="hidden-xs hidden-sm">
    <div class="col-md-4 hidden-xs hidden-sm">
     <?php if ( is_active_sidebar( 'footer-1' ) ) { dynamic_sidebar( 'footer-1' ); } ?>

    </div>
    <div class="col-md-4 hidden-xs hidden-sm">
     <?php if ( is_active_sidebar( 'footer-2' ) ) { dynamic_sidebar( 'footer-2' ); } ?>

    </div>
    <div class="col-md-4 hidden-xs hidden-sm">
    <?php if ( is_active_sidebar( 'footer-3' ) ) { dynamic_sidebar( 'footer-3' ); } ?>

    </div>
 </div>


<div class="row">
<div class="col-md-12">
<?php get_footer(); ?>
</div>
</div>

Upvotes: 0

Views: 591

Answers (2)

hungerstar
hungerstar

Reputation: 21715

Your gray area is created by top padding and the space the title and author text take up. When you have more than one line of text for either the title or author, the gray area will expand.

You can:

  1. Cut the title short with ellipsis, with CSS text-overflow: ellipsis; or WordPress wp_trim_words.
  2. Allow the text to move up and take up more of the gray space at the top of the gray area. Text titles will share a baseline but not a top line.

Here is an example of option #2:

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
 .layerit {
  min-height: 300px;
  background: rgba(0, 0, 0, .3);
  border: 1px solid white;
}
.intro {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  text-align: center;
  transition: background-color .9s ease;
}
.home-title {
  color: white;
}
.home-author {
  color: white;
  padding-top: 20px;
  padding-bottom: 20px;
}
.no-margin {
  padding: 0;
  margin: 0;
}
<div class="row">

  <div class="col-md-4 col-sm-6 col-xs-12 no-margin">
    <div class="layerit">
      <div class="intro">
        <h2 id="title-text"><a class="home-title" href="#">Some really long title. Some really long title. Some really long title. Some really long title.</a></h2>
        <p class="home-author">by Author on 1/1/2001</p>
      </div>
    </div>
  </div>

  <div class="col-md-4 col-sm-6 col-xs-12 no-margin">
    <div class="layerit">
      <div class="intro">
        <h2 id="title-text"><a class="home-title" href="#">Normal title.</a></h2>
        <p class="home-author">by Author on 1/1/2001</p>
      </div>
    </div>
  </div>

  <div class="col-md-4 col-sm-6 col-xs-12 no-margin">
    <div class="layerit">
      <div class="intro">
        <h2 id="title-text"><a class="home-title" href="#">Normal title..</a></h2>
        <p class="home-author">by Author on 1/1/2001</p>
      </div>
    </div>
  </div>

</div>

Notice that the the first letter of the text in the first column is pulled out of the column, this is because .row uses negative left/right margins.

Upvotes: 1

Saurav Rastogi
Saurav Rastogi

Reputation: 9731

You can use text-overflow: ellipsis property of CSS. This will keep truncate your text if it goes outside 100% width. But this will keep your text in one line only, just like this:

#title-text {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fff;
  padding: 0 30px;
}

Have a look at the example snippet below:

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.posts-not-found {
  border: 2px solid red;
  padding: 20px;
  left: 65px;
  right: 65px;
}
.layerit {
  width: 100%;
  height: 100%;
  padding-top: 150px;
  margin: 0 auto;
  background: rgba(0, 0, 0, .3);
  padding-top: 150px;
  position: relative;
  left: 0;
  bottom: 0;
  right: 0;
  text-align: center;
  transition: background-color .9s ease;
  border: 1px solid white;
}
.navbar a {
  padding-top: 30px;
}
.navbar-brand {
  font-size: 25px;
}
.home-title {
  color: white;
}
#title-text {}
.home-author {
  color: white;
  padding-top: 20px;
  padding-bottom: 20px;
}
.no-margin {
  padding: 0;
  margin: 0;
}

#title-text {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fff;
  padding: 0 30px;
}
<div class="row">
  <div class="posts-not-found">
      <h1>Nothing Found</h1>
          <p>It seems we can’t find what you’re looking for. Perhaps searching can help.</p>
  </div>
  <div class="col-md-4 col-sm-6 col-xs-12 no-margin">
      <div class="layerit">
          <h2 id="title-text" ><a class="home-title" href="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat, repellat possimus fuga autem at delectus deleniti eaque repudiandae qui mollitia, voluptatibus, a voluptates illum libero est ab facere obcaecati atque?</a></h2>
              <p class="home-author">by Author</p>
      </div>
  </div><!-- /.blog-post -->
  
    <div class="col-md-4 col-sm-6 col-xs-12 no-margin">
      <div class="layerit">
          <h2 id="title-text" ><a class="home-title" href="">Title</a></h2>
              <p class="home-author">by Author</p>
      </div>
  </div><!-- /.blog-post -->
    <div class="col-md-4 col-sm-6 col-xs-12 no-margin">
      <div class="layerit">
          <h2 id="title-text" ><a class="home-title" href="">Title</a></h2>
              <p class="home-author">by Author</p>
      </div>
  </div><!-- /.blog-post -->  <div class="col-md-4 col-sm-6 col-xs-12 no-margin">
      <div class="layerit">
          <h2 id="title-text" ><a class="home-title" href="">Title</a></h2>
              <p class="home-author">by Author</p>
      </div>
  </div><!-- /.blog-post -->
    <div class="col-md-4 col-sm-6 col-xs-12 no-margin">
      <div class="layerit">
          <h2 id="title-text" ><a class="home-title" href="">Title</a></h2>
              <p class="home-author">by Author</p>
      </div>
  </div><!-- /.blog-post -->

</div>
   <nav>
     <ul class="pager">
       <li>Older Posts</li>
       <li>Newer Posts</li>
       <li>No Newer/Older posts</li>
    </ul>
  </nav>

 <div class="row before-footer-area">
    <hr class="hidden-xs hidden-sm">
    <div class="col-md-4 hidden-xs hidden-sm">
    </div>
    <div class="col-md-4 hidden-xs hidden-sm">
    </div>
    <div class="col-md-4 hidden-xs hidden-sm">
    </div>
 </div>


<div class="row">
  <div class="col-md-12">
  </div>
</div>

Hope this helps!

Upvotes: 0

Related Questions