[Resolved] Website looking bad on Tablet

Hi there,

try this CSS:

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

Hi Sonja,

Try add this CSS first to see if it works.

Let us know 🙂

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;
    }
}

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

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

It’s perfectly fine to use the 1024px 🙂

🙂