Hey there!
Help would be appreciated with ideas on how to maintain a legible font size, when viewing the orange font, of the home page of this website, on a mobile phone.
Specifically: on the home page, above the fold, there is a title image with font saying: “Where clarity meets character…” On a cellphone the title image shrinks down way to small. How might I keep this larger, and legible please?
This is what I would do.
I’ll remove the black text and put it underneath the image like some form of header/statement as it looks too lost and as if it does not belong there. Too busy in my eyes.
I would make the orange text bigger and Central And I would darken the image a little or or put the orange text over a frosted/blur background……play around till it looks good.
Or keep it to the left side, and bigger and frosted black.
This is just my view - but have a play!
Good luck
Hey @AdieJAM, thanks for this.
My question though, is how do I make the orange text image, larger? I have the blocks column, where it’s in, spread out to 12… which is the largest it goes. It’s when it shrinks down to XS size things get hard to read. How do I make the image larger, so when Blocs makes it smaller, it can still be read… even in front of a darker image?
Any help with this would be appreciated. - Thanks!
Hi @Imnrtst
I am back in now - I was in the van parked outside the gym when I messaged last time
(yes ! gym…can’t believe I said that !!! !..lol…just started to go as need to shift the covid belly which keeps expanding due to inflation!!)
Just had a Quick Look and used your assets quickly.
I put your logo in the middle on mobile only and made it full size throughout and seems to look ok from the image I have done below.
I made the image bloc a bit bigger to create more of the image and more of the logo.
And took the text from the original one and put it below.
Your main image is quite big too and took a while on mobile to load.
(also, is this you on the voiceovers !?..if so, great work !)
ps, if you are struggling, send me a direct message and sketch what you are looking for and I will send you that bloc with it and ill edit the image to make it the right size - but id recommend you playing around to make it work, you are so close!
See below:
Holy Smokes, @AdieJAM! Thank you!
I think I understand what you’re inferring.
The gym!? Good for you! That is my next endeavor. LOL Congratulations!
So, basically, in removing the small black text from the top, hero image area, it allows the bloc image to widen?
How did you get the girl in the balloon to show up, just right, in each of the sizings? Is this playing around with padding & Style, in the hero image bloc?
I’ll reduce the size of the background image, so it loads quicker - Thanks!
Yes. That’s me. LOL Thanks!
I do enjoy fiddling around with blocs & learning the software.
It’s fun. I’m just at the point in the project where I’m hitting walls.
Thanks so much for your time and consideration with helping me. I appreciate you!
Change the font size for each separate breakpoint, however, the orange text looks like it’s a placed png, so you’re a bit stuck!
As @AdieJAM said. the black “Voiceovers …” etc lettering could be move below the picture to above “listen”, and you could adjust the “…clarity/character…” placed png class at each breakpoint to make it read better.
Basically, I think enlarge it at each breakpoint so it pretty much fills the height of the megaphone picture.
Hey @TrevReav,
The orange font is a png because I can’t seem to get blocs to manipulate text like that in the blocs program.
I had to use photoshop.
Could you please define what do you mean by, “you’re a bit stuck”?
As in, I can only have the image be 12 columns wide?
I’ve indeed moved the “Voiceovers…” below the picture.
I did next widen the png orange font image across the screen in the XS mobile size.
Is this what you mean here?
Can making the png orange font image wider than 12 columns be done, in the LG/MD & Small screen formats?
I personally think the orange text in the image looks fine, and how I did it, looks great and when I tested it on my mobile it looked ok - so I would keep that image as it is…but hey, 100% up to you.
Here is a video on optimising the image I mentioned. It’s 1.5mb or something like that at the moment. @Eldar who is active here made the video. He has a GREAT set of courses as well if you want to learn more.
Hi @Imnrtst
By ‘you’re a bit stuck’ I only meant that it’s not as easy as just changing the font size.
I can’t see a fresh link, so not sure what you’ve done, however, just by adjusting the padding on the main picture bloc, I’ve done this.
https://www.trevreav.co.uk/BVox/
Settings for top and bottom padding were:
LG - 100px
MD - 75px
SM - 40px
XS - 20px
@AdieJAM, It does look great. I accomplished just what you showed and that helped a ton! Thank you! It did the job.
Thank you for this video and pointing me in the direction of Eldar’s courses.
Thanks again!
Ah, gotcha @TrevReav. Thanks! Makes sense. I appreciate you!
Also, remember you can add your background image to this class also and enlarge the percentage to ‘crop’ to different sizes at different breakpoints.
Best of luck - let us see it when done.
Hey @TrevReav, I’ll do some research on this topic to better understand what you mean.
I’ll need this technique for the girl with megaphone photo on the “About” page. She’s not showing up correctly. LOL
Thanks for pointing me in the right direction!
Updated the published site with what we’ve all discussed so far…
Thanks!
Not on my Mac now to offer any advice, but yes, classes are very powerful (and time saving) things to learn.
Im by no means an expert but learning just that little bit more each time I use Blocs.
