CODEWITHSUNDEEP
htmlcssresponsive-design
user4491949
user4491949

Reputation:

How to make my page title responsive with CSS?

I am trying to make the header of my page responsive (I first code for mobile and after going to wider viewports) and I am using this HTML and CSS codes:

HTML: 

     <header>



        <div class="page_title">
            <h1 >TOYWAWA</h1>
        </div>


        <nav>
            <ul>
                <li><a href="nou.html">HOME</a></li>
                <li><a href="about.html">ABOUT</a></li>
                <li><a href="contact.html">CONTACT</a></li>
            </ul>
       </nav>
    </header>

and CSS:

    header {
                   width: 100%;
                   border-bottom: 10px solid black;
                   border-top: 10px solid black;
                   height: 300px;
                   background-image: url(back.2.jpg)
           }


        .page_title {
                 max-width: 100%;
                 margin-top: 75px;
                 margin-bottom: 50px;
                 font-size: 70px;
                 font-family: BrandonGrotesque-Black, "futura-pt-1","futura-pt-2", Verdana, sans-serif;
                 }



        nav ul li {

             display: inline-block;
             padding: 15px;
             list-style-type: none;
             font-family: BrandonGrotesque-Black, "futura-pt-1","futura-pt-2", Verdana, sans-serif;

                }

This is a link with a complete fiddle: https://jsfiddle.net/Cilvako/5Lcy4cxx/embedded/result/

For some reason the fiddle doesn't display the exact same thing I get in a browser - in the browser the navigation menu under the page title doesn't go out from the containing div, it gets displayed right under the title. This is how the website will look at 320 px and I am testing in with Responsive Design View Tool. At this resolutin, the page title gets cut off. The same thing happens with the backgroung image. I gave the div that contains the page title a max-width of 100% but still didn't helped. Any ideas?

Upvotes: 0

Views: 9314

Answers (2)

BradleyIW
BradleyIW

Reputation: 1358

you should remove the div for .page_title and change the class for <h1> tag to .page_title. 

<h1 class="page_title"></h1>

The css will then apply to the heading, not the container.

JSFIDDLE: http://jsfiddle.net/5Lcy4cxx/3/

Upvotes: 0

Ferrmolina
Ferrmolina

Reputation: 2771

You can try using media queries

header {
    width: 100%;
    border-bottom: 10px solid #000;
    border-top: 10px solid #000;
    height: 300px;
    background-image: url("back.2.jpg");
}
.page_title {
    max-width: 100%;
    margin-top: 75px;
    margin-bottom: 50px;
    font-size: 70px;
    font-family: BrandonGrotesque-black,"futura-pt-1","futura-pt-2",Verdana,sans-serif;
}
@media (max-width: 600px) { 
/* Styles for screen with max width of 600px */
    header {
        height: auto;
    }
    .page_title {
        margin: 0;
        font-size: 25px;
        text-align: center;
    }
}
@media (max-width: 320px) { 
/* Styles for screen with max width of 320px */
    header {
        height: auto;
    }
    .page_title {
        margin: 0;
        font-size: 25px;
    }
}

Upvotes: 2

Related Questions