5

I've been designing my new SXA site on my desktop computer. On a whim I decided to see what my new site design would look like on a mobile device, and I was very disappointed. The site simply shrunk down instead of rearranging itself as I had expected. Here's what my site looks like on the desktop: Desktop view of site

Here's what the site looks like on an iPhone 5: Mobile view of site

I was expecting the site to break at certain points and rearrange automatically in the same way that Bootstrap does. I am using the basic theme. I thought that SXA automatically made my site responsive.

What am I missing to make my site mobile responsive?

Edit

Here's the wireframe of the same page: Desktop Wireframe

Here's what the mobile wireframes look like. I put some big arrows showing where I expected the columns to wrap, but they didn't.

Mobile Wireframe

Here's what it looks like on an actual mobile device:

enter image description here

  • How did you create the layout? Did you use the grid with rows and columns? – Richard Seal Nov 10 '16 at 18:43
  • Yes, I used the Splitter (Columns) component to make the 2 columns. – Keith VanderVeen Nov 10 '16 at 18:56
  • Can you show a screenshot of the wireframe with the design on? Its hard to tell how the site has been built from the current ones. I have just tried a similar design and the columns wrapped as would have expected when reduced to a phone size. – Richard Seal Nov 10 '16 at 20:16
  • Something that I just discovered as I was doing this was that if I resize my browser window, the wrapping seems to work just fine. However, if I use an actual mobile device (or a virtual one on BrowserStack), I don't get the wrapping. I just get really small text. I've attached another screen shot of what the mobile view looks like on a Nexus phone. – Keith VanderVeen Nov 10 '16 at 21:04
5

It appears your Meta Viewport may not be configured correctly, if you are seeing responsive behavior in the browser but not on a mobile device.

Try setting the Viewport field on /sitecore/content/[Tenant]/[Market]/Presentation/Designs to:

width=device-width, initial-scale=1.0, user-scalable=no

... and don't forget to publish it.

Edit:

The path above is actually based on Zen Garden. It's changed to the Theme in SXA as pointed out by Alan. The theme is either /sitecore/media library/Themes/Theme for default themes, or /sitecore/media library/Project/Tenant/site/Theme for client themes.

  • The Viewport field has been moved to a different place and can be found on your Theme item now. – Alan Płócieniak Nov 10 '16 at 21:16
  • @AlanPłócieniak : as in /sitecore/media library/themes/[Theme]? I can update answer. – techphoria414 Nov 10 '16 at 21:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.