Jump to content

Issue with mobile scaling of Markdown text block and banner image

Recommended Posts

Site URL: https://gregorylassale.com

I just redesigned my top page which is now large banner image which includes Markdown text blocks. As you can see on the screenshot below, the top Markdown block and the background image do not scale well on mobile.  

What would be the best way to fix those two issues? For the text, I don't know if just modifying the padding on mobile is the best option. I think it might be better to decrease the font size for mobile. The current Markdown code in that block is

<div style="color:white; text-align:center; font-size:4.5em">GREGORY LASSALE</div>

For the background image, I'm thinking thinking resized versions of the same image, but not sure what other options there are. The affected pages are:

https://gregorylassale.com/english

https://gregorylassale.com/french

1989807962_ScreenShot2021-04-28at7_42_04AM.thumb.png.88386d9a4106e0f3724d4446da30e70a.png

 

Thanks in advance for the help.

Link to comment
  • Replies 3
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Following up on this.

Reducing the padding to 0 for the title block didn't fix the problem at all, while reducing the font size didn't yield very good results. It looks ok in portrait mode, but too small in landscape mode (iPad Pro 11). I set the max width at 1668px (iPad Pro 11's portrait width pic count), but the font stayed the same size in landscape mode. Does anyone have a workaround? I'd be fine with having the title on two lines on mobile phones and tablet portrait mode as long as they don't overlap.

Any help much appreciated. 

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.