sidebar in mobile view for shop pages « Support Forum | Kriesi.at

Support Forum » Propulsion

sidebar in mobile view for shop pages

8 posts from 4 voices

Started 6 months ago by susan_ideology
Latest reply from Nick
This topic is closed
This topic is resolved

Tags:

susan_ideology
Member

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

Posted 6 months ago #
Dude
Dude

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.

Posted 6 months ago #
susan_ideology
Member

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

Posted 6 months ago #
Dude
Dude

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

Posted 6 months ago #
Nick
Moderator
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
Posted 6 months ago #
susan_ideology
Member

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

Posted 6 months ago #
Devin
Moderator

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

Posted 6 months ago #
Nick
Moderator
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
Posted 6 months ago #