StudioPress

Forum navigation

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Responsive Design Question

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Community Forums › Forums › Archived Forums › General Discussion › Responsive Design Question

This topic is: not resolved
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • November 13, 2013 at 12:09 am #72649
    dc50093
    Member

    Is it possible to have the content of the primary sidebar appear before the main content area when a page is viewed on a phone. I'm currently using the Lifestyle Pro theme with a content-sidebar configuration for all pages. I plan on using several other responsive child themes so my question is not specific to Lifestyle Pro. I'm flexible on using either a content-sidebar or a sidebar-content configuration. The important thing is to get the sidebar to appear first on smart phones. Just to be clear, currently the content within the primary sidebar is displayed below the main content when the page is viewed on a phone.

    November 13, 2013 at 9:02 am #72704
    David Chu
    Participant

    Hi,
    Got some ads for them, then, eh? 🙂 I got that type of eccentric request. It would be possible to do that via HTML structure, but I decided to use a less invasive approach. Here's my article about that. That's one method, and it should get you pointed in the right direction.

    Dave

    Dave Chu · Custom WordPress Developer – likes collaborating with Designers

    November 13, 2013 at 12:51 pm #72734
    dc50093
    Member

    David, your solution worked nicely for me- thank you. I have a small issue with one of the pages that I'm using witha two column structure where the columns are displaying side by side instead of stacking in phone views. My code within the main content area looks like this:

    <div class="one-half first">xxxx</div>
    <div class="one-half">xxxx</div>

    It was stacking one column on top of the other when viewed on phones prior to the application of the fix you provided. Now it's displaying side by side. Any way you can think of to get it to stack one on top of the other while still retaining the sidebar first layout?

    November 13, 2013 at 1:06 pm #72740
    dc50093
    Member

    David, please disregard my last question. I mistakenly placed your code snippet in max-width: 1023px. Once I moved it to max-width: 767px everything worked beautifully. Thanks again for your help!

    November 13, 2013 at 1:08 pm #72741
    David Chu
    Participant

    Glad it helped!

    I will only give extremely broad advice (if at all) for anything I can't see. I can say this - you'll probably need to add those classes to the group of things that go to 100% width at small sizes. That's how the stacking tends to work.

    Good luck,
    Dave

    Dave Chu · Custom WordPress Developer – likes collaborating with Designers

    November 13, 2013 at 1:09 pm #72742
    David Chu
    Participant

    Very cool!

    Dave Chu · Custom WordPress Developer – likes collaborating with Designers

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘General Discussion’ is closed to new topics and replies.