[Resolved] How can I make my site displayed vertical screen same as Horizontal screen

[nutt]

Here is my site nuttblog

It works well on iPad horizontal display but turn to be mobile display when looking on vertical display.

I would like to make the width still no matter screen rotated.

Thank you

[David]

Hi there,

i don’t understand what you’re trying to achieve.

Maybe a screenshot of how it looks and how you want it to look would help.

[nutt]

I mean how to keep the same width of sitecontainer on iPad screen both rotations?

Thank you

[Tom]

Hi there,

So just to confirm, you want the sidebar to remain next to the content on portrait tablet screens, but still drop down below the content on mobile?

Let us know 🙂

[nutt]

Yes, That ‘s what I really mean.

[Tom]

Give this CSS a shot:

@media (max-width: 768px) and (min-width: 700px) {
    .content-area, .sidebar {
        float: left;
    }

    .content-area.grid-80 {
        width: 80%;
    }

    .sidebar.grid-20 {
        width: 20%;
    }

    .one-container.right-sidebar .site-main {
        margin-right: 41px !important;
    }
}

[nutt]

HI, Tom

Thank you so much. it works really well

[Tom]

You’re welcome 🙂

[Author]

Posts