[Resolved] Resposive design doesn’t work on table(Dispatch theme)

[wontae]

It shows PC design on Tablet view.(screenshot attached)
The preview on Site Library shows me Tablet view is same as the mobile view.

I have no idea what’s the problem.

Could you help me how to solve the problem?

img
https://drive.google.com/file/d/1Nz44Gx3WNGPa-pFn60pTHlTRYRG_S32h/view?usp=sharing

[David]

Hi there,

can you share a link to your site?
And can you confirm you want the mobile view on larger tablet views ?

[wontae]

I’m sorry, here’s my website link below.

Yes, I want a mobile view on larger tablet views.

http://brandon-insight.com/

[David]

Can you confirm the size of tablet you want to adjust it for?

For example an iPad Pro 10.5″ has a CSS pixel width of 834px.
Whereas a iPad Pro 12.9″ has a CSS pixel width of 1024px.

[wontae]

It’s a 10.2″ iPad

[David]

Try adding this CSS:

@media (max-width: 840px) {
    .site-content {
        flex-direction: column;
    }
    .container .site-content .content-area {
        width: auto;
    }
    .is-left-sidebar.sidebar, .is-right-sidebar.sidebar {
        width: auto;
        order: initial;
    }
    .wp-show-posts-columns, .wp-show-posts-inner {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .wp-show-posts-columns .wp-show-posts-single {
        display: block;
        width: 100%;
    }
}

In the first line: @media (max-width: 840px) { you can change the 840px to 1024px if you want to apply to the larger ipad.

[wontae]

The problem is solved!

Thank you very much

[David]

Glad to hear that

[Author]

Posts