Laying Out Pop-Ups in Desktop vs Mobile in Squarespace

I last wrote about how I’ve recently discovered a new passion for web design, namely using Squarespace. I also mentioned that I had only one Squarespace web design under my belt (mine!) at the time my branding client asked me to design her e-commerce site. Because I had had such a positive experience designing my own website, I decided to do hers as well.

 Squarespace is intuitive, and you really don’t have to know web design to use it. Understanding how layout design works to draw in your audience helps. But overall, Squarespace has a lot of things you could add to your site without having to reinvent the wheel. One of the things it’s good at is taking your design (that you will build on a desktop) and displaying it in both desktop and mobile versions. Since a desktop has a more horizontal view than a mobile site, which is more vertical, Squarespace takes care of laying this out for you. Until it doesn’t.

I was working on my client’s webpage but since we were still a couple of months before going live, I decided to have a “Coming Soon” landing page. I designed it in InDesign, exported it as a .jpg and uploaded it to Squarespace and when I tested it on my desktop, it looked just the way I intended. But when I went to the mobile version…oops. It displayed it exactly like I had it…in horizontal fashion, not vertical.

Now, if I didn’t know any better, I could say, “Well, people will just have to zoom in to see what it says.” But no. This is not a good user experience setup. I’m not sure what I was thinking Squarespace was supposed to do with my horizontal style image, but this was not working. So I went and Googled how to fix this eyesore. I’m not exactly sure what verbiage I used to find the answer, but I found it in this article. This is the CSS code for getting those horizontal images to work in mobile version. Of course, I had to re-design it to a vertical layout, but once I did that, I just plugged in that CSS code and voila! It worked.