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

    Hi there, I have set up my page layout in the shop pages with a left aligned sidebar. On the shop overview page, the sidebar moves to the bottom of the page (as it does on all other pages on the site). For some reason, on the product detail page, it stays at the top of the browser window – so before the image.

    I would like to bring these into harmony – so either the sidebar stays at the top of both pages or moves to the bottom on both pages. I thought the answer might be in media queries, but can’t seem to find a way of resolving it with this method.

    Here is a link to the site so you can see what i mean. http://goo.gl/zBp40

    Many thanks,

    Susan

    #96949

    Please try to use a right aligned sidebar instead (like the demo page here: http://www.kriesi.at/themes/propulsion/shop/ – because the sidebar floats to the right the media queries will push it down and display the sidebar below the main content.

    #96950

    thanks for the suggestion, but the whole site was designed to use a left float sidebar and has been built as such. Because the theme blurb talked about having the option to align the sidebar both right and left, I did not realise this would be a problem. I wonder if there is another way to resolve the problem without changing the position of the sidebar? Susan

    #96951

    Hey!

    I’m not aware of another solution atm but I tagged this thread for the other support staff members – maybe someone has an idea.

    Regards,

    Peter

    #96952

    Hi,

    Unrelated: You have an error in your “cookie warning”, there is an undefined image

    <div id="cookie-law-info-bar" style="display: block; background-color: rgb(255, 255, 255); background-image: url(http://s154267.gridserver.com/investment/undefined); color: rgb(0, 0, 0); font-family: inherit; position: fixed; bottom: 0px;">

    —-

    I don’t see any pages that have a sidebar below the content. Some pages have the left sidebar( http://s154267.gridserver.com/shop/ ) or ( http://s154267.gridserver.com/product/allen-woody-1935/ ) and other pages have a left sidebar that’s completely empty ( http://s154267.gridserver.com/investment/ ) . The homepage , I am not sure , looks like a custom template with two columns and no sidebar.

    Please show a direct link to the page with the problem. Also please turn off the w3 Total Cache while developing, and especially its minification feature.

    Thanks,

    Nick

    #96953

    Hi Nick,

    The problem is in the inconsistent way that the theme treats the sidebar on mobile view in the product detail pages.

    So in the shop overview at http://s154267.gridserver.com/shop/ for example, when you go to mobile view, the sidebar slides down underneath the main content. This is how the sidebar works on all other pages (including the basket, checkout etc).

    however on the product detail page, for example http://s154267.gridserver.com/product/allen-woody-1935/ when you reduce the browser window or view on a mobile, the sidebar moves up above the main content.

    Thanks for all your other helpful comments btw.

    Susan

    #96954

    Hi Susan,

    As Peter described the issue is in how the pages are constructed based on the theme’s templates. The order of the actual divs is what decides the layout when you move to a smaller window. So on the shop example, the way it is constructed is that the sidebar div is after all the other content. So when it moves to a mobile view and the divs get set to 100% width they just go in order.

    The other example, the sidebar is set first so when the screen shrinks down the sidebar gets the 100% width and sits on top.

    As Peter said, I don’t see a route in which to change the construction without really changing a lot of the theme/framework.

    Regards,

    Devin

    #96955

    Hi,

    Peter and Devin are of course are correct, that changing the code will be brutal.

    What you can do though, is something like this. for http://s154267.gridserver.com/shop/

    @media only screen and (max-width: 767px) {
    #top.archive .inner_sidebar {
    position: absolute;
    top: -4220px;
    right: 100px;
    }
    ul.products {
    position: relative;
    top: 340px;
    right: -70px;
    }
    }

    Try it in your Quick CSS to see what I mean. However for long term, you may have a different number of images or a different number of lines for each image description. So I would put that css inline, and with jQuery get the total height … $(document).height() … of this page ( http://s154267.gridserver.com/shop/ ) and based on the total height of the entire page I would dynamically set the ‘top: -4220px;’ css value. Just an idea for a workaround if its important to you.

    Thanks,

    Nick

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

The topic ‘sidebar in mobile view for shop pages’ is closed to new replies.