Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Sebastian Wilson
Sebastian Wilson
15,710 Points

Text in image overflows when in mobile view

I have set an image to a max height of 320px and it has text inside of around 30px it looks fine on a big monitor but on mobile the text it overflowing to be outside the image. What could I do to sort this please

2 Answers

Owa Aquino
Owa Aquino
19,277 Points

Hi Sebastian,

You can use CSS media queries that when you go into a certain width (mobile size) the font will automatically change its font-size.

Sebastian Wilson
Sebastian Wilson
15,710 Points
Sebastian Wilson
Sebastian Wilson
15,710 Points

Thanks a lot I ended up doing this

@media (max-width: 500px) { .font-mobile-size { font-size:20px !important; }

@media (max-width: 350px) { .font-mobile-size { font-size:15px !important; }

Owa Aquino
Owa Aquino
19,277 Points

Glad I can help, keep it up! :)