Wide layout design

Community Forums Forums Design Tips and Tricks Wide layout design

This topic is: resolved

Tagged: 

This topic contains 7 replies, has 3 voices, and was last updated by  mborger 8 months, 1 week ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #73106

    mborger
    Participant
    Post count: 107

    Hi folks. I’m tasked again with rebuilding our website. I’m currently using Outreach – the site is at http://funthingsapp.com/dev

    Right now I have two half div’s in the Home section. When viewed on my iPhone, the two halves are stacked vertically – as they normally would be in a responsive design. Same for the Home Featured sections.

    However, looking at a site like http://flipnetwork.com, the site does not react as such when viewed on a mobile phone. It’s the full site but it looks ok (to me) without any responsive adjustments.

    So if I wanted my site to copy the general layout of flipnetwork.com with its horizontally aligned call-to-action buttons, how would I go about doing that without the vertical stacking that seems inherent in all responsive themes? I have the theme package, so I’m not tied to Outreach – any theme would be fine. Unless, of course, preventing the stacking could be done with any theme, in which case I’ll stick with Outreach. Doesn’t matter to me. I’m thinking of using an image slider, stack large home image or similar horizontal call-to-action buttons and want more control over how it’s used on a phone. I hope this makes sense!

    Thank you.

    #73120

    dareadel
    Participant
    Post count: 76

    Just my 2 cents here. YOu may want to try and remove or adjust the percent with under this media query. I had an opposite issue to what you want and the fix was to adjust the home widgets. A 100% setting will stack everything under 600px width.

    So I will change:
    @media only screen and (max-width: 600px) {

    .home-1,
    .home-2,
    .home-3,
    .home-4 {
    padding: 10px;
    width: 100%;
    }

    to

    @media only screen and (max-width: 600px) {

    .home-1,
    .home-2,
    .home-3,
    .home-4 {
    padding: 10px;
    width: 45%;
    }

    Or perhaps remove the CSS for media query @media only screen and (max-width: 600px) and everything under it.

    Hope I am making sense.

    • This reply was modified 8 months, 2 weeks ago by  dareadel. Reason: Additional information
    • This reply was modified 8 months, 2 weeks ago by  dareadel. Reason: Additional information
    #73230

    mborger
    Participant
    Post count: 107

    Thank you – I will keep this in mind. But you know what’s amazing? I just put one line of meta code in the head hook to make the app bar appear on iOS and that was enough to stop the stacking and make the site appear full width. Had no clue one would affect the other.

    #73334

    dareadel
    Participant
    Post count: 76

    Interesting. Could be frustrating trying to navigate through the codes. Glad you resolved it and have a good weekend.

    #73366

    mborger
    Participant
    Post count: 107

    Well, I thought I had it fixed. Guess not. What happens now is that the correct wider layout appears when you reload or first visit the page. But if you then click into any subpage and then hit the back button, the stacked layout appears. I have to reload the screen if I want the wider layout to reappear.

    I tried making the change you suggested, even going to 25%, but it didn’t make a difference. — Have a great weekend as well :)

    • This reply was modified 8 months, 2 weeks ago by  mborger.
    • This reply was modified 8 months, 2 weeks ago by  mborger.
    #73967

    moneyfunk
    Participant
    Post count: 24

    I just uploaded Outreach, too. Mobile responsive (I’m using an iphone).

    Everything is good so far, until I open a blog post page (http://www.oatmealinmybowl.com/blog/coffee-date-where-you-be-christine/). And then its a wide layout.

    Here is a photo screenshot: http://sdrv.ms/1aNfxot

    How can I fix this?

    I am using the Genesis Layout Extras so that the blog category page is sidebar/content/sidebar and then when you open the blog page it goes to content/sidebar. but i don’t believe that is the issue.

    Thank you.


    • This reply was modified 8 months, 2 weeks ago by  moneyfunk. Reason: added photo to screenshot
    • This reply was modified 8 months, 2 weeks ago by  moneyfunk. Reason: added photo to screenshot
    #74107

    mborger
    Participant
    Post count: 107

    Well somehow, that problem seems to have corrected itself. The wide layout is sticking on the iPhone. But now I have a separate problem.

    I’ve reduced my Home Sections at the bottom to just one section. My images in a text widget span the width of the page when viewed on a laptop. But on an iPhone, they only span the first half before wrapping around, as if there’s another column in the second half. I looked at the @media section of style.css and I guess I haven’t come up with the winning combination to make it behave the same way.

    Any thoughts? http://funthingsapp.com/dev (Outreach theme)

    Thank you.

    #74601

    mborger
    Participant
    Post count: 107

    Got it! Sometimes you just have to come back another day and look all over again – especially when you’re a code rookie :)

    I just had to add the line:

    padding: 0px 40px 0px 0px;

    to the #home-sections block in the @media section for 1200

Viewing 8 posts - 1 through 8 (of 8 total)

The topic ‘Wide layout design’ is closed to new replies.