scale and position text dynamically with screen size with css

Question

I want to place some text over a banner on my homepage. The banner changes it's size dynamically, when I scale it in Developer-Mode. Hower I can't mange to kepp the position of the text relative to the banner and change the font-size according to the scaling factor. I tried with font-size vh, vw, % etc.

Here is the sample on jsfiddle: https://jsfiddle.net/malptek/2o3a81vp/2/

My html-code:

<div class="header-container clearfix">
    <!-- <div class="helper-box"></div> -->
    <h1 class="header-post-title-banner header-subimage">This is a title</h1>
    <img src="http://mesut.alptekin.de/wp-content/uploads/tmpbanner.jpg" class="header-image">
</div>

And css:

.header-container {
margin-bottom: 0;
font-size: 16px;
z-index: 1;
/* border-bottom: 1px solid #EAEAEA; */
position: relative;
width: 100%;
}

.helper-box {
z-index: 2; 
position: absolute;
margin-left: 8%;
background-color: #ababab;
margin-bottom: 0; 
width: 260px; 
height: 20%;
}

.header-subimage {     
z-index: 2;
font-size: 16px;
position: absolute;
margin-left: 8%;
margin-bottom: 0;
/*  background-color: #fff;
opacity: .5;     */     
width: 20%;     
height: 20%; 
/* width: 8em;     
height: 1.67em; */ 
}

.header-image {
z-index: 1;
margin-bottom: 0;
/* border-bottom: 1px solid #EAEAEA; */
width: 100%;
position: relative;
}

.header-post-title-banner {
/* font-size: 3vh;
font-size: 2vw; */
font-size: 150%;
text-align: center;
color: #1b6dba;
font-weight: bold;
padding-bottom: 0;
}

@media screen and (min-width: 1285px) {
.header-post-title-banner {
    font-size: 1.8em;
    text-align: center;
    color: #1b6dba;
    font-weight: bold;
    padding-bottom: 0;
 }
}

================================== UPDATE:

well, this example is working because viewport is the same size as the banner. but you can imagine the banner being inside another big with 1400px wide (see new example: jsfiddle.net/malptek/2o3a81vp/7). However, in this example the image is somehow not scaling according to the new (don't know why).

All is fine, but you need CSS media queries to change text-size based on breakpoints. — divy3993, Sep 17 '15 at 06:53
Yeah. It looks fine. Only need the media queries for different devices. — Yon Glory, Sep 17 '15 at 07:50
well, this example is working because viewport is the same size as the banner. but you can imagine the banner being inside another big
with 1400px wide (see new example: https://jsfiddle.net/malptek/2o3a81vp/7/). The image is not scaling according to the new
(don't know why). — malptek, Sep 18 '15 at 06:15

score 0 · Answer 1 · edited May 23 '17 at 12:14

Works for me with vw.

https://jsfiddle.net/abalter/2o3a81vp/3/

CSS length measurements vw, vh, and vmin are starting to be widely supported.

http://caniuse.com/#feat=viewport-units

I'm kind of confused by how to interpret the global browser use percentages, but, unless you are concerned about compatibility with older browsers, you can use them pretty freely.

CSS: Are view height (vh) and view width (vw) units widely supported?

scale and position text dynamically with screen size with css

1 Answers1