Skip Navigation

[Resolved] Making sidebar responsive (CSS Grid)

This support ticket is created 2 years, 6 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
- 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 -
- 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 -

Supporter timezone: Asia/Karachi (GMT+05:00)

This topic contains 2 replies, has 2 voices.

Last updated by Luigi Bella 2 years, 6 months ago.

Assisted by: Waqar.

Author
Posts
#2163215

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!

#2163381

Waqar
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

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

#2165247

Thank you Waqar! Your reply helped fix the problem easily, even with my limited CSS Grid experience.

This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.