Stop Flexbox Text from Shrinking

I was recently working on a simple flexbox layout and the text in the flex box children kept shrinking to be completely unreadable. There was no indication in the inspector as to why flexbox was shrinking the text. My flexbox container was set to 100% but the children were not respecting the flex-basis I had set.

However, the body tag was set using CSS to width: 100vw.

I was using a stripped down starter theme in WordPress that I had never used before and did not realize it was missing this meta tag:


<meta name="viewport" content="width=device-width">

I added this in header.php after the opening <head> tag and my flexbox text stopped shrinking.

You can also add this meta tag by pasting the following code into functions.php:

add_action('wp_head', 'meta_fix');
function meta_fix(){
?>
<meta name="viewport" content="width=device-width">

<?php
};

 

Leave a Reply

Your email address will not be published. Required fields are marked *