Jump to content

How do I Optimize Mobile Layout on MÉRIDA?

Recommended Posts

Site URL: https://theunapologetictraveler.co

My blog pages look perfect on mobile, as I have activated AMP. But the landing page on the Merida template is not optimized. 

The horizontal images on the landing page are not responsive on mobile, so they look chopped up. Is there a way for me to optimize it for mobile. The same images look great on the actual blog post, but not on the landing page. I'm attaching the screengrabs of what it currently looks like.

I'd really appreciate your help. Thank you.

This is my blog:



mobile 1.jpg

mobile 2.jpg

Link to comment

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
.homepage #page section:first-child {
    min-height: unset;
    height: 40vh;


Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Problem solved!!!

The wonderful Squarespace Team sent me this message, and it worked like magic. Thank you Squarespace! 

I thought I'd share their message here, in case someone needs the same solution:

"I see that you're having some trouble with the appearance of background images on your homepage on mobile. 

I've had a look and I see what you mean there. With background images, there will always be some degree of cropping, particularly on mobile devices. Having said that, there are some options that may help here. 

For example, adjusting the section height for the page sections where the background images can help to minimise cropping. I've shown an example in this video:


You can also adjust the focal point for the images to control what area of the image displays, as shown at the end of the video.

We have some more information on those options in these guides:

Changing section heights - http://sqsp.link/thZuB3

Setting focal points - http://sqsp.link/f82cTI

The following guide also includes tips for troubleshooting cropping issues that may be helpful:


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.