I’m using bootstrap to do my portfolio page. I have an image and text in the first section which looks fine on the laptop. When I view it on a phone the image goes teeny tiny and the text takes up multiple lines, starting underneath the image. I’ve got the text set to % but I’m guessing this is just doing % of the original text size, not % of the screen width.
The codepen is here - https://codepen.io/WillowFae/full/ozPBoz/
Thanks in advance 
make sure you have the meta viewport tag (codepen has button in settings to add this to head):
<meta name="viewport" content="width=device-width, initial-scale=1">
Usually to make text responsive you can use @media queries, or set the font-size to a viewport unit such as:
font-size: 50vw; /* 50% of page width */
I do not know for sure, but I believe if you set the percent for font-size, it is % of inherited value which by default in most browsers is 14px or 16px. You can also use em and rem units which are based off the same thing, but are slightly different.
Thanks. Wasn’t aware of vw. I found a tutorial on it and the demo they have on that page does exactly what I want mine to do - https://css-tricks.com/viewport-sized-typography/
However, mine is still no resizing the font, just splitting it over more lines as it was before. I’ve added the tag to the head
This is what it looks like for me on a small phone screen in dev tools:
What browser are you using, or are you testing it out on your actual phone? If that’s the case, codepen may be messing it up.
Also, a side note, on the forums, please reply to me not thread, quote reply, or mention me otherwise I will not get notified of your post.
That’s what I’m getting on my phone (iPhone so using safari), but isn’t what I want. I just want the text to get smaller - and although it will split onto more than one line, I want it inline with the image. It’s also what I get if I resize both Chrome and Edge on my laptop
Ok, now I know what you want. I will look at it again soon.
Just bumping in case anyone else has any ideas on this
As far as I know this isn’t supported by all browsers, you could create a function that monitors the screen width and resizes elements accordingly, or you could just write some media queries that change text size where you want it to. I will be really nice when vm (viewport width) is standardized to the point that it becomes the standard.
If you would like to obtain something like the above image, you should set a different col-*-* value for small and extrasmall screens to both personal-photo and intro-text (something like 3+8 on xs and 2+10 on sm), then set a percentage margin-top to the intro-text (try different values and choose which better fits your feelings) and set to it a bit bigger font-size (I tried with 4.3vw).
That’s all (I tried it only with Firefox responsive test tool). I hope this could be helpful.
