Headings Not Responsive

  • I am taking a web-developer bootcamp. We are creating our own themes using a boilerplate. I’ve got everything working on my front_page.php, except my headings (H1 – H6) are not being responsive. Everything else on the page will resize appropriately, but I have the huge headings that run outside their boxes. What do I need to do to make the headings responsive, like the rest of the page?

Viewing 6 replies - 1 through 6 (of 6 total)

  • Can you provide HTML mark-up (& CSS) so that we can look into the issue?

    Thread Starter SadaajitA

    (@sadaajita)

    Here’s the CSS
    `

     /*
Front Page
*/

.home-page-title {
    font-family: $font-family-serif;
    font-size: 30px;
    position: relative;
    margin-top: 40px;
    a{
        color: $brand-primary;
    }
}

.home-page-content { 
    position: relative;
    display: block;
    border-radius: 10px;
    background-color: lightgray;
    text-align: center;
    font-family: $font-family-serif; 
    font-size: 16px;
}
.content{
     padding: 2px;
}

.info-box{
    max-width: 20%;
    float: left;
    margin: 10px 0;    
    padding: 10px;
    position: relative;
    min-height: 330px;
    text-align: center;
   
    img{
        margin-bottom: 10px;
        max-width: 100%;
        border-radius: 10px;
        box-shadow:  2px 2px 3px 1px $brand-terciary;

    }
}

.info-box-inner{
    padding: 10px;
    border-radius: 10px;
    box-shadow:  2px 2px 6px 1px $brand-primary;
}

.fp-button{
    border-radius: 10px;
    background-color: $brand-secondary;
    color: white;
    text-decoration: none;
    text-align: center;
    
}
.txt-color {
    color: white;
}

.page-title{
    padding-top: 10px;
    font-family: $font-family-serif;
    font-size: 22px;

}

    [Moderator note: code fixed. Please wrap code in the backtick character or use the code button.]

    • This reply was modified 7 years, 11 months ago by bdbrown.
    • This reply was modified 7 years, 11 months ago by bdbrown.
    Thread Starter SadaajitA

    (@sadaajita)

    For some reason the HTML is not going through. Any ideas? I’ve tried twice, now and it reloads the page, but the HTML doesn’t show up. The CSS loaded easily. I’ll try once more.

    <?php get_template_part(‘partials/head’); ?>
<html>
<body <?php body_class(); ?>>
<?php get_template_part(‘partials/header’); ?>

<main class=”container”>

<?php
while (have_posts()) : the_post();
?>

<div class=”row”>
<div class=”col-sm-12″>
<div class=”home-page-content content”>
<h1 class=”home-page-title”>
“><?php the_title(); ?>
</h1>

<?php the_content(); ?>

<div class=”container”>

<div class=”info-box”>
<div class=”info-box-inner”>
/dist/images/pexels-photo-sunbeams.jpg”>

<div class=”pagecontent”>
<h2>The Vision</h2>
<p>To Create Paradise on Earth We Need to Change Our Ideas About Our Physical Surroundings, Community Life, Education, Economics, Healthcare, and Government.</p>
<button class=”fp-button”>Read More
</div>
</div>
</div>

<div class=”info-box”>
<div class=”info-box-inner”>
/dist/images/unsplash-industrial.jpg”>

<div class=”pagecontent”>
<h2>The Future</h2>
<h4>The Problem </h4>
<p>Why We Must Design a New Civilization.</p>
<h4>The Future </h4>
<p>We Have a Choice to Create and Restore or to Destroy and Degenerate Our World</p>

<button class=”fp-button”>Read More
</div>
</div>
</div>

<div class=”info-box”>
<div class=”info-box-inner”>
/dist/images/dome-home.jpg”>

<div class=”pagecontent”>
<h2>Sustainable Technologies</h2>
<h4>Ultra Low-Cost Construction</h4>
<p>To Solve the World Housing Shortage.</p>
<h4>Life Support Technologies</h4>
<p>To Provide Abundant Food, Energy, and Natural Waste Recyling.</p>
<h4>Energy Technologies</h4>
<p>To Provide Electrical Energy for the Home.</p>

<button class=”fp-button”>Read More
</div>
</div>
</div>

<div class=”info-box”>
<div class=”info-box-inner”>
/dist/images/pexels-love.jpg”>

<div class=”pagecontent”>
<h2>Community</h2>
<h4>Education </h4>
<p>New Designs for Education.</p>
<h4>Community Information Networks</h4>
<p>Making Communities Work.</p>
<h4>Economics</h4>
<p>New Spiritual Planetary Economics.</p>
<h4>Sustainable Communities </h4>
<p>How to Create Sustainable Communities</p>

<button class=”fp-button”>Read More
</div>
</div>
</div>

<div class=”info-box”>
<div class=”info-box-inner”>
/dist/images/unsplash-salad.jpg”>

<div class=”pagecontent”>
<h2>Wellbeing</h2>
<h4>Food </h4>
<p>How Will We Be Fed?</p>
<h4>Vegetarianism</h4>
<p>Why Vegetarian?</p>
<h4>Vibrant Health</h4>
<p>Natural Ways to Create and Maintain Physical, Mental, and Emotional Health.</p>

<button class=”fp-button”>Read More
</div>
</div>
</div>
</div>
</div>
</div>
</div>

<?php endwhile; ?>

</main>

<?php get_template_part(‘partials/footer’); ?>
</body>
</html>

    [Moderator note: code fixed. Please wrap code in the backtick character or use the code button.]

    • This reply was modified 7 years, 11 months ago by James Huff.
    • This reply was modified 7 years, 11 months ago by bdbrown.
    Moderator bcworkz

    (@bcworkz)

    Have you tried setting the font-size as a percentage of the viewport width? You’ll need a few media queries to alter the percentage, otherwise the text will get too small to read. If all of your text is similarly scaled, all will remain relatively proportional. I’ve not used this universally site wide, so I’m not sure how well it’ll really work.

    A hybrid approach may be better. Fixed height for larger screens, then proportional for smaller.

    BTW, the reason you had trouble with posting the HTML is failure to use backticks or the code button. The system saw this as a code injection attempt or spam and kicked your post into the moderation or spam queue. If you just wait a while when that happens, someone will soon release your post and then it will appear. Better yet, use the code button and (usually) avoid the entire problem ??

    Thread Starter SadaajitA

    (@sadaajita)

    Sorry it has taken me so long to reply. I did not get a notification that you had sent a response the second time…

    The problem I’m having is only the headings in the boxes are a problem. The smaller text within the boxes is acting responsively. Plus all other text on the page is scaling properly, even other headings. I have Bootstrap loaded, as well, so am using containers, rows, cols, etc. to keep things responsive. I thought this would take care of the headings, but it doesn’t seem to be doing the trick.

    I tried the percentages and it did not work well. It was not what I was looking for. Any other ideas?

    • This reply was modified 7 years, 10 months ago by SadaajitA.

    Hi @sadaajita,

    As @bcworkz mentioned above, I would also recommend you to use media queries to fully control the style / design.

    Here is an example (on media query):

    <!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-type: none;
}

ul li a {
    color: green;
    text-decoration: none;
    padding: 3px; 
    display: block;
}

@media screen and (max-width: 699px) and (min-width: 520px) {
    ul li a {
        padding-left: 30px;
        background-color: BLUE;
    }
}
</style>
</head>
<body>

<h1>Resize the browser window to see the effect!</h1>

<ul>
  <li><a data-email="[email protected]" href="mailto:[email protected]">John Doe</a></li>
  <li><a data-email="[email protected]" href="mailto:[email protected]">Mary Moe</a></li>
  <li><a data-email="[email protected]" href="mailto:[email protected]">Amanda Panda</a></li>
</ul>

</body>
</html>
Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Headings Not Responsive’ is closed to new replies.