Right and left sidebar toggles disappears when in iPad and phones

Hi easyme. Maybe you’re already aware of all this but here’s what I found. The s2 sidebar collapses as designed at 1200px. The content area expands to fill the sidebar area, which it should, but there is also a wide blank area to the right of the content area. You can scroll right and find the sidebar << activation icon on the right edge of the screen at the bottom of the content area. The s1 sidebar collapses at 948px as designed. The sidebar >> activation icon for that sidebar is on the left edge of the screen at the bottom of the content area, and there is still a wide blank area to the right of the content area. Both sidebars collapse and are displayed below the content area as designed at 480px and below. I removed elements one at a time, trying to see if one of them was causing the issue, but didn’t find anything. So it seems. between 1200px and 480px wide, something (maybe an overflow?) is keeping the site from being completely responsive. I loaded a fresh copy of Hueman from the author’s web site and ran through several configurations; it worked without any problems. I guess the first thing I’d try, if you haven’t already, is disabling plugins to see if there is some sort of conflict.

The other thing you might look at are the media queries you have in your custom css.

Hi bdbrown,

Thanks a lot for looking into my problem. (and sorry, excuse me for the post hijack! Didn’t mean to..,was on a state of panic)
Yes, I have noticed the toggle at the bottom and I also deactivated plugins. These didn’t work.
I made a new WP site and placed custom CSS one by one to check which code is the culprit.

It now works in the new site.

Thanks a lot for your help. It was very kind of you.

Have a great day!

easyme

Glad you got it working. If you don’t need any more help please mark your topic as resolved. Thanks.

Hi bdbrown,

I’m having a similar problem. The sidebar toggles for both left and right sidebars don’t appear when viewing the site in landscape mode. Works fine on single post pages though. The site Max-width is set to 1250px.

Screenshot: https://i.imgur.com/znnftZw.png

This is the code that I used to swap the position of sidebars on index page, which is certainly causing this issue.

/* 3 column, content middle */
.col-3cm .main { background: url(img/sidebar/s-right-s2.png) repeat-y left 0; }
.col-3cm .main-inner { background: url(img/sidebar/s-left.png) repeat-y right 0; padding-right: 340px; padding-left: 260px; }
.col-3cm .s1 { float: right; margin-right: -340px; }
.col-3cm .s2 { float: left; margin-left: -260px; /* ingenuity! */ position: relative; left: -100%; }
.col-3cm .content { float: left; }

How can I fix it by still swapping the sidebars position?

Site: https://test.webtrickz.com/

Please help!

@mayurjango – You may get a better response if you start your own topic. What I will say is that changing the basic structure of a theme is usually a fairly complex undertaking, especially when you’re dealing with one that is responsive. In addition to the change you’ve made you’ll likely also need to make adjustments to most, if not all, of the media queries in the theme responsive.css file.

Hi @mayurjango.
Yes, bdbrown is right. You will attract more help by creating your own topic. I made the same mistake of piggybacking on another topic.

I wish you luck in finding a solution to your problem.

easyme