CODEWITHSUNDEEP
htmlcss
Ben Davidow
Ben Davidow

Reputation: 1215

Larger header text for higher resolution displays

I have header text overlaid on an image. The issue is that on higher resolution desktop screens (e.g., > 1600px) the header only takes up a small section of the image width. I want the header text to take up ~90-100% of the available width regardless of the res.

http://www.dailyspiro.com

<div class="container-fluid">
    <div class="col-md-12 landing-container">
        <img src="images/pig.jpg" class="main-image" width="70%">
        <div class="uvp">
            <h1>Spread Compassion & Track Your Impact</h1>
            <button class="join-button">Join Now</button>
        </div>
    </div> 
</div>

.uvp {
    padding: 5px 5px 5px 14px;
    width: 70%;
    background: rgba(66,51,51,.77);
    margin: -119px auto 0px auto;
    display: block;
    text-align: left;
}

.uvp h1 {
    color: #fff;
    font-size: 247%;
    margin-top: 12px;;
}

.landing-container {
    padding: 0;
    margin: -15px auto 0 auto;
    text-align: center;
}

.main-image {
    z-index: -1;
    position: relative;
}

Upvotes: 0

Views: 74

Answers (3)

Mug&#233;
Mug&#233;

Reputation: 472

CSS:

/* Large screen above 1400px  */

@media only screen and (min-width: 1400px) {

    body {

        .uvp h1 {
            font-size: your larger size here;
            margin-top: your larger size here;
        }
    }
}

Note: you have double (;;) semicolon in your above margin-top marking.

Upvotes: 1

Sajad Karuthedath
Sajad Karuthedath

Reputation: 15767

use cssmediaqueries

CSS Media Queries are a feature in CSS3 which allows you to specify when certain CSS rules should be applied. This allows you to apply a special CSS for mobile, or adjust a layout for print.

@media only screen and (max-width: 1633px) and (min-width: 1400px) {
 .uvp h1 {
         color: #fff;
    font-size: 247%;  //use your desired bigger font size
    margin-top: 12px;;
     }
}

Upvotes: 0

newTag
newTag

Reputation: 2169

If you want the header take up ~90-100% of the available width space for higher resolution desktop screens (e.g., > 1600px), style the header accordingly using specific Media Queries.

You can use Media Queries, Some media queries for Standard Devices are:

    /* Large screens ----------- */
    @media only screen 
    and (min-width : 1600px) {
    /* Styles */
/* Set your font-size here */


    }

Upvotes: 2

Related Questions