[Resolved] Website looking bad on Tablet

[Marius]

Hello,

my site is looking bad on tablet. The sidebar is on the right side, but so narrow, that only 2 – 3 words are in one line.
Why is the sidebar not on the bottom, like on mobile view on phone?

[David]

Hi there,

try this CSS:

@media (max-width: 1024px) {
    .site-content {
        flex-direction: column;
    }
    #primary,
    #right-sidebar {
        width: 100%;
       
    }
    #main {
        margin-right: 0;
    }
}

[Marius]

Hi David,

Should I add this css, or do I have to replace some css with it?
And what does it do?

[Ying]

Hi Sonja,

Try add this CSS first to see if it works.

Let us know 🙂

[Marius]

Hello,

what stands the 1024 for? Is this the size of the window, when the sidenbar starts to switch to the bottom of the site?

And is it possible to change the max-width: 1024px to another number? Maybe a bit less?

[David]

what stands the 1024 for? Is this the size of the window, when the sidenbar starts to switch to the bottom of the site?

Yes thats correct.

And is it possible to change the max-width: 1024px to another number? Maybe a bit less?

And yes, you could reduce it to another size eg.

@media (max-width: 834px) {
    .site-content {
        flex-direction: column;
    }
    #primary,
    #right-sidebar {
        width: 100%;
       
    }
    #main {
        margin-right: 0;
    }
}

[Marius]

Hi David,

okay, thanks. Is 1024 the recommended value? Or was that just a random suggestion?

[Ying]

768px *1024px is the iPad screen width and length.

So 1024px is the typical iPad width on horizontal direction.

[Marius]

With this setting on my Samsung Tablet (10.4 Zoll) I see the Sidebar in Landscape Modus, but not in Portrait Modus.
I think that is fine.

What I am only concerned about is the fact that this setting is not part of the basic settings of this site (Marketer Site). So I think maybe for some reason it would be wrong to set this setting.

[David]

It’s perfectly fine to use the 1024px 🙂

[Marius]

Hi David,
thanks, then I will keep it like this.

[David]

🙂

[Author]

Posts