Community Forums › Forums › Archived Forums › Design Tips and Tricks › Wide layout design
Tagged: responsive
- This topic has 7 replies, 3 voices, and was last updated 10 years, 4 months ago by mborger.
-
AuthorPosts
-
November 15, 2013 at 1:21 am #73106mborgerMember
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.
November 15, 2013 at 6:57 am #73120dareadelParticipantJust 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.
November 15, 2013 at 1:21 pm #73230mborgerMemberThank 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.
November 15, 2013 at 8:35 pm #73334dareadelParticipantInteresting. Could be frustrating trying to navigate through the codes. Glad you resolved it and have a good weekend.
November 16, 2013 at 2:10 am #73366mborgerMemberWell, 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 🙂
November 18, 2013 at 11:12 am #73967moneyfunkMemberI 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.
November 18, 2013 at 8:35 pm #74107mborgerMemberWell 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.
November 20, 2013 at 6:14 pm #74601 -
AuthorPosts
- The topic ‘Wide layout design’ is closed to new replies.