Text on image - how to make it responsive

Contributor ,
May 17, 2022 May 17, 2022

Copy link to clipboard

Copied

Hi. I figured out how to put text on an image.  It is not a background image.  Here is the code:

 

 
<body>
<div class="imagebanner">
<img src="images/happyfamily.jpg">
<div class="bannerdescription">
<p class="typicaltext">Treating Children with Trauma Attachment Issues </p>
</div>
</div>
</body>
</html>
 
Css-------------------
.typicaltext {
    color: #000000;
    font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-weight: bold;
    font-style: italic;
    text-align: left;
    font-size: 22px;
}
.bannerdescription {
  position: absolute;
  top: 50px;
  left: 50px;
}

.imagebanner{
  position: relative;
}
 
img {
  max-width: 100%;
  max-height: auto;
}
 
---------------------------------------------------------------------------------------------------
Any ideas of how to make the text responsive?  Does it have to be a background image?
 
Thanks

Views

107

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
May 17, 2022 May 17, 2022

Copy link to clipboard

Copied

You would just use media queries to change the size of the text font at a given breakpoint:
 
 
@media screen and (max-width: 768px) {
.typicaltext {
font-size: 18px;
}
}
 
@media screen and (max-width: 480px) {
.typicaltext {
font-size: 16px;
}
}

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
May 18, 2022 May 18, 2022

Copy link to clipboard

Copied

Thank you. I will add them.

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
May 19, 2022 May 19, 2022

Copy link to clipboard

Copied

Thank you.  As the image gets smaller the text does too but it lays over the picture.  Is there some css that would make the text wrap in the media queries? 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
May 19, 2022 May 19, 2022

Copy link to clipboard

Copied

quote

Thank you.  As the image gets smaller the text does too but it lays over the picture.  Is there some css that would make the text wrap in the media queries? 


By @beng2000

 

Observe at what breakpoints (browser window width/s) the text starts to encroach upon the image and add more media queries until it works as desired.

 

To limit the width of the .typicaltext box add a media query using max-width at the point where the text  encroaches upon the image, that will wrap the text into 2 lines: 

 
@media screen and (max-width: 768px) {
.typicaltext {
max-width: 300px; /*Adjust to suit*/
line-height: 50px; /*Adjust to suit*/
}
}
 
 
Unfortunately this is all a bit trial and error when you have text that needs to fit into a limited space. Part of our job as developers is to be foreward thinking, so we either avoid the situation or accept the challenge, which usually means a bit more work will be involved.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
May 17, 2022 May 17, 2022

Copy link to clipboard

Copied

Use Viewport Units instead of pixels.

 

Here is working example with proper symantic markup.

https://alt-web.com/TUTORIALS/?id=responsive_text_overlays

 

CSS:
figure.overlay {    
position: relative;    
width: 100%;    
z-index: 1;  
}  
figure.overlay img {width: 100% }
    
figure.overlay figcaption {    
position: absolute;    
z-index: 1000;    
height: 100%;    
width: 100%;    
top: 0;  
/**optional background overlay**/    
background: rgba(255,255,255,0.2);  
/**text, adjust all values as desired**/    
padding: 57% 2% 0 2%;    
font-weight: 700;    
color: purple;  
/**some fallback value**/    
font-size: 16px;  
/**responsive size is roughly 3.4%  of the device's viewport width**/    
font-size: 3.4vw;  
}

HTML:
<figure class="overlay">      
<img src="https://placeimg.com/768/576/people/1" alt="person">
<figcaption> Figcaption<br>
Description<br> 
</figcaption> 
</figure>

 

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
May 17, 2022 May 17, 2022

Copy link to clipboard

Copied

quote

Use Viewport Units instead of pixels.

 

Here is working example with proper symantic markup.

https://alt-web.com/TUTORIALS/?id=responsive_text_overlays

 

 


By @Nancy OShea

 

Using vw (viewport width) on its own to set the size of fonts usually results in the text being too small on a smartphone and too large on a wide screen, plus the text can't be zoomed if someone with poor eyesight needs to zoom the text to read it.

 

You're better off using clamp with a minimum/maximum size and a responsive size inbetween.

 

font-size: (1.5rem, 4vw, 2rem); 

 

However having said that clamp currently only has about 90% browser support, so it's down to the individual to decide if that's enough to be of use in a production environment.

 

I personally still use media queries and px because I think it's more specific. When clamp gets to about 95% support I'll consider adopting it fully or though I'm unlikely to be using it in a production sense as I dont do this anymore.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
May 17, 2022 May 17, 2022

Copy link to clipboard

Copied

There are many ways to skin the proverbial cat.

 

We don't know which devices the OP is targeting or how much text they plan to use. Colors, font-styles and text-sizes can be adjusted as needed.  I just like the simplicity & scalablity of Viewport Units over pixels.

 

That said, I mainly use calculations in production work.

 

selector  {

font-size: calc(18px + 1vw);
line-height: calc(1.1em + 0.5vw);

}

 

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
May 18, 2022 May 18, 2022

Copy link to clipboard

Copied

You might find that using calc still presents font size issues particularly on smartphone. It's not that much better than using vw to control the font size, which should be avoided.

 

The best method will be clamp once it gets to about 95% browser support. For now l just set the text using px because its more controllable at the bottom and top end range. Yes it's more work producing a series of media queries and l know a lot of developers seem to have an allergic reaction when it comes to more work but it sorts out the wheat from the chaff so to speak, those that care and those that don't.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
May 18, 2022 May 18, 2022

Copy link to clipboard

Copied

Clamp sounds great.  I will keep an eye on it. Thank you for your help.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
May 17, 2022 May 17, 2022

Copy link to clipboard

Copied

As a third alternative (adjust the value to suit)

 

<p class="typicaltext" style="font-size: 3.4vw;">Treating Children with Trauma Attachment Issues </p>

 

 

Treating Children with Trauma Attachment Issues

To see this working, reduce the width of the browser.

Wappler, the only real Dreamweaver alternative.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
May 22, 2022 May 22, 2022

Copy link to clipboard

Copied

LATEST

I just wanted to chime in on this one.


Nancy was very right to steer you into using viewport and basically telling you to use dynamic font sizes. For Hero content and things like that this and Vectors are 100% the way to do it.

It still will mean media query work for sure but less of it but simply because position is also very subject. A mobile phone vertical a widescreen banner is simply not going to be the same so a more vertical version is what you likely will do.


One thing not really mentioned is ensuring z-index and Object fit.

If your not having an image as a background image (Which to be honest will work better) if that is a relative position you still need to give it a z-index and absolute positioned text a higher one to ensure it always its above it.

Object-fit will give you the ability to scale the image with similar options to having it as a background image.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines