Hi there!
I setup my view output with a CSS Grid for the results and a sidebar for the controls, could you possibly help me make the sidebar mobile responsive? I'm thinking it will need to stack above the results on certain screen sizes.
Here is the page: hidden link
Here is the View Output:
<div class="view_wrapper">
<div class="view_content">[wpv-layout-meta-html]</div>
<div class="view_sidebar">[wpv-filter-meta-html]</div>
</div>
And the CSS:
inner-grid {
display: grid;
height: 100%;
grid-gap: 5px;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
word-break: break-word;
}
.view_content {
grid-area: main;
}
.view_sidebar {
grid-area: sd;
}
.view_wrapper {
display: grid;
grid-template-columns: repeat(9, 1fr);
grid-auto-rows: minmax(100px, auto);
grid-template-areas:
"main main main main main main main sd sd"
}
Thank you!
Hi,
Thank you for contacting us and I'd be happy to assist.
To make sidebar area stack on top of the results, on smaller screens (i.e. smaller than 920px width), you can additionally include the following CSS code:
@media screen and (max-width: 919px) {
.view_wrapper {
grid-template-areas: "sd" "main";
}
}
You can learn more about CSS media queries for responsive design from this guide:
hidden link
I hope this helps and for more personalized assistance around custom code, you can also consider hiring a professional from our list of recommended contractors:
https://toolset.com/contractors/
regards,
Waqar
Thank you Waqar! Your reply helped fix the problem easily, even with my limited CSS Grid experience.
