Archived topic
Resposive design doesn't work on table(Dispatch theme)
7 replies · Started by wontae on January 13, 2022
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
Hi there,
can you share a link to your site?
And can you confirm you want the mobile view on larger tablet views ?
I'm sorry, here's my website link below.
Yes, I want a mobile view on larger tablet views.
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.
It's a 10.2" iPad
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.
The problem is solved!
Thank you very much
Glad to hear that
