I’ve a one page site, built in foundry, In the mobile view I have the 3 bars, in the top right. I’ve looked but can only find this below, which appears not to work on the mobile version?. Do I need to use different code?
Any help would be great. Thanks Jon
Doug Bennett - RapidWeaver Pro
add this CSS to the site-wide settings:
header.navbar {
display:none;
}
Can you provide a link to the website? Very difficult to find the correct code to target without it.
Thanks Neil.
Its here…
Cheers Jon
This might seem like a dumb question but why’d you put a navigation bar stack on a single page site?
I’m on an iPad right now so I can’t help with the code you’re asking about.
You also should checkout how the site looks on an iPad in portrait view down starting around the “ Train together” section it becomes unreadable.
_This might seem like a dumb question but why’d you put a navigation bar stack on a single page site?
Because I‘d left it in after lifting the top section from another site I was playing around with, so the only dumb bit is me! - Still learning, after coming off themes.
Obviously thats now ok. 
I did check the site on all devices in RW8 - but think anything above a mobile would be viewed in landscape and for the life of me I couldn’t get that to format correctly in portrait as you’re pointed out. More than happy to be informed of the correct way of going about it. Thanks for your time Doug.
My first suggestion would be to not think in landscape or portrait or mobile vs tablet vs desktop. You should be thinking about screen widths and making sure your site displays properly at any width. If I look at the page on a desktop and have my browser open with a window size less than 992px and greater than 767px the page is broken. That’s not an uncommon window size for desktop users with large monitors having multiple apps open at the same time.
It’s also always a good practice to test your layouts on every possible screen width you can, and take off the “Apple blinders”, There are a lot more devices and screen widths out there than the current Apple line up. Within RapidWeaver, the Simulator only has the Apple preset devices sizes, but there is a “custom” option that allows you to “drag” to any size you like. I would suggest you do just that, start with the largest size you can and drag down slowly and watch what happens to your site as you cross each breakpoint.
Now for the problem with the current page starting at the section:
at the subsection Individual Personal Training
You have a Foundation Row stack with one Column within the Row. That single column is set with the following classes:
col-xs-12 col-md-6 col-lg-12
So Im not sure why you have a different number set for the “md” (Medium) breakpoint. Right now if I edit that and change that to a col-md-12 It flows out and fills the space. Than if that’s what we are doing than I don’t know why you would have the “row and Column at all”? But atleast change then as to not srink at the med size.
Now the section:
You have an "outter Row/column that has the class set to col-xs-12 col-md-6 col-lg-12 like above. That outer Column/ros includes the heading and line, then the content(unordered list) bellow has another Row/column combo that has the column again set with different breakpoints col-xs-12 col-md-6 col-lg-10. Not sure what the reason is for the row/column inside a row/column with the different breakpoint. But again if you change the HTML on both the content flows nicely on all screen sizes.
Hi Doug… many, many thanks for taking the time to explain all this, Im very grateful. I’m slowly getting my head around all this, but at times its a lot to take in. As a graphic designer Im use to making things fit to a certain size and shape, and therefore do have issues trying to get my head around responsive/flowing graphics. (more so at my age) 
i can use PS and illustrator etc with my eyes closed, so hopefully in time, working with RW will become 2nd nature.
I had taken for granted that once I‘d fitted to all the sizes in RW (or so I thought), that anything in between (none apple) would be catered for. 
Newbie error! (again!)
I‘ve managed to get the lower part working thanks, but will need more time on the top section. For the meantime I’ve been able to load up the Turner stack to cover that 767 - 992. Cheers Jon
It’s easier when designing for use progressive enhancement (aka mobile first) in the design. Start with the smallest screen width and then work your way up to the next width. Decide what you can add or change with the additional “real estate” as screen width gets larger.
As for images and responsive design, it can be challenging but doable. Everything needs to be based on the width of the screen. Images can be responsive but based on width.
I just checked your site again and saw you added a “warning message about being in landscape mode”. If I were a prospective customer that’s an instant back button and onto the next site offering these services. It’s creating a poor user experience. You’ll lose prospective clients “telling them how to browse” your site.
There are people who prefer to use portrait mode and there are folks on desktops(still the majority in most markets) that can have the window sized to anything.
This is what I get on chrome with a narrow window open:
I can’t easily rotate my 27-inch display and if I did and left the window size the same it won’t work anyway. Right now a user has two chooses, resize my window on my desktop (the message doesn’t tell me that) or try to force your site to work or move on to another competing site. The second option is more likely.
I would never tell a user how to view my site. At this point, your “lucky” that a prospective customer has come to the site, so don’t do anything that might drive them away.
Thanks for the tip re starting with the mobile and working up. As mentioned for the ‘meantime’ I’ve loaded the Turner stack as I’m away this weekend. This is only a temp fix, until I’m back on Monday, I couldn’t agree more, that this is not the way forward. However the client is fine with it for this weekend. Thanks again for your help.
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
