How do I - update sidebar to at least 300px on larger screens, then either disappear or collapse below the content at 1023px (about the size of a portrait-orientation tablet). Thanks!
Example:
Coding provided by X them users FB page 
@media(max-width: 1023px) {
.singlepost .x-main {
width: 100% !important;
}
.singlepost .x-sidebar {
display: none;
}
}
@media(min-width: 1023px) {
.singlepost .x-main {
width: calc(100% - 450px) !important;
}
.singlepost .x-sidebar {
width: 400px !important;
display: flex;
flex-direction: column;
justify-content: center
}
}
.x-sidebar img{
width:100%;
}
Glad to hear to you’ve sorted it out.
1 Like
Slight change to:
.x-main.left {
max-width: calc(100% - 340px);
}
.x-sidebar.right {
min-width: 300px;
padding-left: 0;
}
@media only screen and (max-width: 1023px) {
.x-sidebar.right {
float: none;
clear: both;
min-width: initial;
}
.x-main.left {
max-width: 100%;
width: initial;
}
}
Glad to hear you got it sorted.