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

Improve this question
4
  • How did you create the layout? Did you use the grid with rows and columns?
    – Richard Seal ♦
    Nov 10, 2016 at 18:43
  • Yes, I used the Splitter (Columns) component to make the 2 columns.
    – Keith VanderVeen
    Nov 10, 2016 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, 2016 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, 2016 at 21:04

1 Answer 1

Reset to default
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.

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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