WordPress.org

Ready to get started?Download WordPress

Forums

Customizr
Left Hand Menu Moves To Right Side Of Page When Resizing (8 posts)

  1. Crimblepud
    Member
    Posted 6 months ago #

    I just noticed a big problem with the layout using this theme...

    Load this address with your browser's window size made very narrow: http://www.themesandco.com/customizr/ - it has to be narrow enough for the left-hand menu to disappear - if you have to make the browser window narrower for that to happen, make sure you reload the page before continuing.

    Then maximise the browser window - see how the left-hand menu is now on the right?

    Same happens tablets and other mobile devices with the browser full screen (without having to resize) - load the page holding the tablet in portrait mode, then turn it round to landscape mode - and you'll see the left-hand menu on the right hand size.

    Just set up a site for a client who wanted to use this theme, and noticed this as I was demonstrating their site to them on their tablet :-(

  2. ElectricFeet
    Member
    Posted 6 months ago #

    You mean the showcase and view demo buttons. Just tried it on an iPad and you are right, they switch positions. There are also other issues with the menu on the iPad, which I have reported to nikeo.

    However, the themesandco.com/customizr site is not actually pure Customizr. It's a support page, based on Customizr, but with a lot of extras in there.

    The site to demonstrate with the next clients would be demo.themesandco.com :-)

    Flagging for nikeo's attention in any case.

  3. Crimblepud
    Member
    Posted 6 months ago #

    Er - no - I do mean the left-hand sidebar menu.

    And at present I would _not_ demonstrate demo.themesandco.com because if you select "Two columns : left sidebar" from the "Layouts" menu - the same behaviour would be exhibited!

  4. ElectricFeet
    Member
    Posted 6 months ago #

    Ah, you mean the sidebar. That wasn't in your original post, so I was a bit lost.

    Yes, you're right. Nice find!

    On a desktop, it's a bug that would mostly affect web developers demonstrating responsiveness :-)

    - Starting with a small screen, on a page with a left sidebar, the page initialises with the content first (this is Good). As the page reflows as you resize, using the underlying twitter bootstrap, you will see the left sidebar on the right.

    - Starting with a left sidebar on a wide screen, the page reflows as you resize. As you get smaller, the page reflows to show the sidebar first (again, as per twitter bootstrap). A reload in the middle is then crucial to forcing the behaviour you describe, because on reload the content is shown before the sidebar. Resizing to get a big viewport again means that the left sidebar is on the wrong side.

    I presume Nicolas (or Bootstrap?) is deliberately checking the viewport at the beginning, to make sure that the content comes up top. (Which is the right thing to do: I wouldn't want a site that showed a sidebar first.)

    It's somewhat academic on a desktop browser — albeit irritating — as a reload will sort things out.

    But on a tablet it's very problematic, I agree.

    On the iPad, both landscape and portrait show the two sidebars next to the content, with no initial reflowing. So switching from one to the other makes no difference to the order.

    Which tablet hardware are you using? I presume an iPad mini type size? (I don't have one, so cannot check).

    In terms of a solution, we're between a rock and a hard place. You either show the sidebar first on a small screen and the site is a mega-fail from a content point of view. Or you show the content first and it reflows the left sidebar to the right when you turn the tablet.

    Any possible solution that means reloading the page as you turn the tablet is a no-starter, as users would not appreciate what they would perceive as a broken site (turning a tablet is, and should be, immediately responsive; there shouldn't be a reload).

    Now I think I know why we see so many sites these days with only right sidebars. It resolves this problem neatly! Note that it's not a flippant comment. I've been seriously searching sites that I know are well-written and responsive and a lot of them have right sidebars. Even 2 sidebars on the right, e.g. http://css-tricks.com/

    Could you try newsweek.com (which is built on bootstrap 3) on your device and tell me what happens to the "Drill downs" section in landscape and portrait? On the iPad, it's side-by-side with the articles all the time. I'd be interested to see if it splits one way on your device landscape and another in portrait.

    The pragmatic solution is of course to only use right sidebars.

    I fear there may be no easy and perfect solution to this, but maybe nikeo's got something up his sleeve that he can dynamically check with javascript.

  5. Crimblepud
    Member
    Posted 6 months ago #

    The "left-hand menu" - that is quite clear, no?

    Have to say, I find it odd that you comment: "It's somewhat academic on a desktop browser - albeit irritating - as a reload will sort things out."
    And yet go on to say: "Any possible solution that means reloading the page as you turn the tablet is a no-starter, as users would not appreciate what they would perceive as a broken site (turning a tablet is, and should be, immediately responsive; there shouldn't be a reload)."
    You're contradicting yourself there, mate!

    Honestly, I have to say, I thought this was a forum for support, not for others to waffle on! Pragmatic indeed! It's not hard to force the "sidebar" to stay on the left, using correct CSS & JavaScript events. If the internet is full of web sites with sidebars on the right, then maybe that just goes to show how many developers/designers there are out there who don't know how to do their job properly!

    Oh, and the Newsweek site? The drill-downs stay in the same place on my devices...

  6. ElectricFeet
    Member
    Posted 6 months ago #

    No, a sidebar is not a menu.

    I'll make sure I don't "waffle on" on any of your posts in future (and there was I thinking I was doing rigorous problem determination and testing, for nikeo's benefit).

    Most users (who are not developers) DO NOT resize their browsers down to mobile size, reload the page and then resize again. Most users DO turn their iPads. Hence the non-contradiction in my iPad comment.

    Remember that this is a free theme and on the forums we are all giving of our time and code freely to help others. (I am not associated with the developer of the theme.) If you want to complain and not collaborate in finding a solution, I suggest you find a paid theme where people are paid to hear your complaints.

    "It's not hard to force the "sidebar" to stay on the left, using correct CSS & JavaScript events."
    Great news. Want to write a fix?

  7. Crimblepud
    Member
    Posted 6 months ago #

    I ain't complaining about the theme - I'm complaining about you hijacking this thread!
    I certainly do appreciate the hard work this developer does, and others who make positive contributions to solving issues.

    What I don't appreciate is people who make statements that lack accuracy: "Most users (who are not developers) DO NOT resize their browsers down to mobile size, reload the page and then resize again. Most users DO turn their iPads. Hence the non-contradiction in my iPad comment."

    Well, for your information, it is not uncommon for other applications to use Internet Explorer for their own purposes and open it up using a fairly small window, thus the next time the user starts IE itself, the window remains the same small size and the user will want to maximise it.

  8. nikeo
    Member
    Theme Author

    Posted 6 months ago #

    Hi @Crimblepud, I have identified this issue too a few weeks ago but could'nt fix it at that time. It's now been set back to priority #1 for the next release. (in early March).

    Thanks for pointing this out!

    And @electricfeet, thanks for your constant will to be as precise as possible.
    You help is much appreciated guys!
    Best

Reply

You must log in to post.

About this Theme

About this Topic