Jump to content

Text overlay on a banner background image not displaying in correct location for some browsers when viewed on Apple Retina display desktop/laptop equipment.

Recommended Posts

Site URL: https://bachcollegiumsd.org/

Your responses appear to be leading the Squarespace developer forums, so I thought I would reach out directly to you. We have a client who approved a design for their index page. This index page has text laid in a specific location within the image. Due to the way the client wanted the video directly underneath to appear, we needed to use a background banner hero image rather than an image block so that the image would span the length of the container. 

As such, getting the overlaid text to place exactly where the owner desires it has been a bit of a challenge.  Using the combination of text boxes and spacers yields unsatisfactory results.  Therefore, we have resorted to the use of CSS position property )fixed) with padding to get the text to lay where the owner desires.  So far, Chrome and Firefox have yielded good results.  We are having some slight issues with Microsoft Edge, but mostly with users of Apple MacBook Pro laptops (particularly the 13" equipment) that are outfitted with their Retina Display who use Chrome as their default browser.  Safari isn't much better.  The Retina resolution is 2560x1600.  

We've been experimenting and adjusting on a "Not Linked" page.  

How the sandbox page displays on Firefox (desktop)

How the sandbox page displays on Chrome (desktop/PC)



How the sandbox page displays on Microsoft Edge (desktop)


How the sandbox page displays on Macbook Pro Safari



How the sandbox page displays on Macbook Pro Chrome


The green frames demonstrate where the text should be sitting on the page with the existing hero image on the live production site. What can we do with the CSS to allow Apple Retina desktop/laptop equipment with higher resolution to display the text in the appropriate location (within tolerable allowances)?  

Below is the CSS for the "Season 2020/2021" test effort. 

<div style="position: fixed; top: 55px; left: 635px; font-family: trade-gothic-next-compressed, sans-serif; font-size: 61px; line-height: 0px; color: #f49d00; font-weight: 700;">SEASON 2020 | 2021</div><br />
<div style="position: fixed; top: 100px; left: 635px; font-family: trade-gothic-next-compressed, sans-serif; font-size: 31px; font-style: italic; line-height: 0px; color: #ffffff; font-weight: 400; letter-spacing: 2px;">...for the refreshment of the soul</div>

If you would like login credentials to investigate for yourself, please advise. 

Link to comment
  • 2 weeks later...
  • Replies 1
  • Views 478
  • Created
  • Last Reply


This topic is now archived and is closed to further replies.

  • 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.