sidebar on mobile under content

Tagged: sidebar

This topic has 40 replies, 4 voices, and was last updated 5 years, 7 months ago by bjbarker.

Viewing 20 posts - 1 through 20 (of 41 total)

1 2 3 →

Author

Posts
January 23, 2019 at 3:45 am #164233

Hans
Participant

Hi,

Yesterday evening I looked at the website toerfietsleusden.nl for the forst time on my iPad and saw that the sidebar on mobile is placed under the content area and not at the right page side. This when the iPad or iPhone is in the upright position.
I change the width of the sidebar in:
.sidebar-primary .widget{
width:75%;
}
but no result.
Is there a solution for it?
I cannot find one in the support forum.

Kind regards

Hans Hagmeijer.

January 23, 2019 at 10:42 pm #164286

sapana
Participant

@toerfiets: Can you please attach me a screenshot of the i-pad issue you are having? everything seems to be fine in my mobile.

Kind Regards,
Sapana

January 24, 2019 at 4:36 am #164332

Hans
Participant

Hi Sapana,
Thank you for answering.

Did you see the website after logging in? There is the problem. In the public part all is well. There is no sidebar.

Two questions: how can I send login and password to you and how can I send an image. If I try to add an image I only can give an url.

Kind regards

Hans Hagmeijer

January 24, 2019 at 6:17 am #164341

sapana
Participant

@toerfiets: I cannot see any sidebar in your front-end section sorry to say this but I amn’t clear about your issue. To send the screenshot please follow the steps;
step1: Take a screenshot
step2: Copy that screenshot in Dropbox
step3: send the drop-box link

Kind Regards,
Sapana

January 24, 2019 at 6:55 am #164344
sapana
Participant
@toerfiets: Go to=> Appearance=> Customize=>Additional CSS and add the following CSS code
```
@media screen and ( max-width: 899px ) and ( min-width: 600px ) {
    #primary {
        width: 70% !important;
    }
    .sidebar {
        width: 30%!important;
    }
        
        #primary, .sidebar {
            display: inline-block;
        }
}
```
It will work in ipad but in mobile the sidebar appear below the content area.
Let me know if this helps you out!

Kind Regards,
Sapana
January 24, 2019 at 8:11 am #164351

Hans
Participant

Hi Sapana,

This did not work fully.

I don’t have a dropbox. I will send you an email with the screenshots.
What happens is:
the sidebar is split in two parts next to each other. Maybe it is possible to prevent this by making the sidebar smaller. I will try that.
The menu has been moved after the new css to the middle of the page. Yu can see that in the screenshot.

Kind regards

Hans Hagmeijer

January 24, 2019 at 8:23 am #164352

Hans
Participant

Hi Sapana,

I just changed the measures of the images in the sidebar into thumbnail format.
That also did not make any difference, not even after refreshing the page.

Kind regards

Hans Hagmeijer

January 24, 2019 at 8:24 am #164353

Hans
Participant

And still one remark.
After adding css also the sidebar before footer has become smaller, just like the primary right sidebar.

January 24, 2019 at 3:34 pm #164370

Hans
Participant

On the laptop screen all is functioning well. I adapt the width of the content and the width of the sidebar in the css.
But even in the horizontal position of the iPad, the sidebar (width 150 px) comes beneath the content.

January 24, 2019 at 11:32 pm #164380

sapana
Participant

@toerfiets: I have modify your site can you please check it and let me know if this ok?

Kind Regards,
Sapana

January 25, 2019 at 3:38 am #164395

Hans
Participant

Wow, This is how we meant it. Many thanks for your support.
Is it possible to tell me what you have done?
I feel a bit of stupid that I could not realize this and understand what is necessary.

Kind regards

Hans Hagmeijer

January 26, 2019 at 3:56 pm #164473

Hans
Participant

Hi Sapana,
I am sorry. I thought your solution was good, but I was wrong.
I use two sidebars: the primary sidebar and the sidebar-before-footer.

When I use your solution, that means that the sidebar-before-footer becomes only 1/3 or 1/4 of the original length.

I tried several things for hours, but I did not succeed to give the sidebar-before-footer the necessary length of 1200 px.

Can you please take care of this and look if there is a solution for this.

Kind regards

Hans Hagmeijer

January 26, 2019 at 4:09 pm #164474

Hans
Participant

At the end I figured out (I have the copy on my own domain to test things) that you forgot to add -primary to the 30% rule.

The only thing -and then our website is finished- is a something right sidebar. I tried to fill in another percentage, but that did not wor.

K. R.

Hans Hagmeijer

January 27, 2019 at 8:29 am #164487

Hans
Participant

I meant: the only thing I should like is a something smaller right sidebar. I managed to make the sidebar smaller, except for the iPad in horizontal position. In the vertical right up position all is well. In the horizontal position the width of the right sidebar is too big. You can see this on Hagmeijer.nl. The credentials are the same I sent to you before.

Kind regards

Hans Hagmeijer

January 27, 2019 at 10:28 pm #164514

sapana
Participant

@toerfiets: I will look at the issue and get back to you soon.

Kind Regards,
Sapana

January 28, 2019 at 3:07 am #164542

Hans
Participant

OK,
Take your time.

January 28, 2019 at 11:49 pm #164593

sapana
Participant

@toerfiets: Can you please take a look at the website and let me know if this ok? I think now the sidebar before footer is fine and right sidebar too.

Kind Regards,
Sapana

January 29, 2019 at 3:22 am #164629

Hans
Participant

I just sent an email.
Of course it is so that on the iPhone the sidebar occurs under the content. That is normal, I think. But if the iPhone is in landscape position, it works fine. That was needed.
One more time. Thank you for helping.

Kind regards

Hans Hagmeijer

January 29, 2019 at 3:40 am #164635

Hans
Participant

Now I made the sidebar temporary visible on the homepage

January 29, 2019 at 6:08 am #164648

sapana
Participant

@toerfiets: Could you please check it once in your mobile and let me know if this is fine or not?

Kind Regards,
Sapana
Author

Posts