How to make text size responsive inside of a div?

1
votes

I'm trying to make a responsive wordpress theme and I am having trouble with the title text not being responsive.

When I try different screen sizes the title text eventually goes OUT of the header and I don't want that. I would like for it to stay inside the header div no matter the screen size.

My header:

 <div id="header">

  <div id="titlebox">
  <p class="blogtitle"><?php echo get_bloginfo ( 'name' );  ?></p>
  <p class="tagline"><?php echo get_bloginfo ( 'description' );  ?></p>
  </div>

  <div id="searchbox"><?php get_search_form(); ?> </div>

 </div>

The CSS:

#header { 
    width: 100%;
    height: 23.2%;
    margin-top: 2.1%;
    margin-bottom: 2.1%;
}
#titlebox {
    width: 60%;
    float: left;
}
.blogtitle {
    font-style: normal;
    text-shadow: 2px 2px #a2a2a2;
    font-size: 3em;
    padding-top: 2.1%;
    padding-right: 2.1%;
    padding-bottom: 0;
    padding-left: 2.1%;
}
.tagline {
    font-style: italic;
    text-shadow: 1px 1px #a2a2a2;
    font-size: 0.75em;
    padding-top: 0;
    padding-right: 2.1%;
    padding-bottom: 2.1%;
    padding-left: 2.1%;
}
#searchbox {
    width: 40%;
    float: right;
}
2
wordpresstextfontssize

2 Answers

1
votes

At smaller widths, your text is just too large so it overflows. You need to use media queries so that when your widths go below a certain point, you shrink the font size.

e.g.:

@media all and (max-width: 767px) {
  .blogtitle {
    font-size: 2em;
  }
}
@media all and (max-width: 500px) {
  .blogtitle {
    font-size: 1em;
  }
}

And to answer to last question, creative responsive design is way more than I can answer here. Rather than randomly picking breakpoints at which to change font sizes, use something like the Chrome Responsive Inspector plugin. It will show you what responsive breakpoints are already in use in your theme. It would be best to try and match those. That way your changes will match with any other changes in the theme at the same breakpoints.

That says that for all widths up to 767 wide, make the font-size for the .blogtitle class 2em instead of the default 3em.

1
votes

This works for me

.resposive_text {
    font-size: 30px; 
    font-weight: 600;
    /*here put anything you want for desktop size*/
}

@media (max-width: 500px) {
  .resposive_text  {
        font-size: 18px; 
        /*here put anything you want for mobile size*/
  }

}

And in my div

<div class="resposive_text">
  <p>Bienvenidos a ENL Team Peru</p>
</div>

HTH