How do you make a zone appear for responsive site?

Celero Solutions asked on May 19, 2014 17:11

Hi, I'm working on a responsive site. I need to add a zone and therefore a web part to the part that will display in a mobile phone width. When I add the zone in the layout view and then flip to the design view I can't see the zone to add the web part to. Have you ever encountered this? Even if I reduce the size of the browser window the zone does not appear.

zone responsive

Recent Answers

Charles Matvchuk answered on May 19, 2014 17:43

You need to clarify what you are using to make the site responsive? If you are using a grid system such as twitter bootstrap etc., what is shown and hidden is controlled by the css classes.

0 votesVote for this answer Mark as a Correct answer

Brenden Kehren answered on May 20, 2014 07:49

What I typically do is put the zone in a container like so

<header>
  <div class="logo">
    <webpartzone />
  </div>
  <div class="social">
    <webpartzone />
  </div>
</header>

Then I'll place a webpart in the zone (one each viewport your working with) and in the Content before/after of the webpart I specify the css class that wraps the webpart. This way the whole zone is always visible and only your webparts change.

There are other ways to accomplish this but this seems to work the best for me.

0 votesVote for this answer Mark as a Correct answer

Charles Matvchuk answered on May 23, 2014 16:57

Brenden's Suggestion works, but it is a lot more work and heavier pages in the long run. True responsiveness uses flow and layout control and to manipulate the content 1 time. Either way, whether you use a framework or if you create the container/webpart twice with two different layouts and just show the one you want depending on the viewport, you should be fine.

0 votesVote for this answer Mark as a Correct answer