Hide Specific Sidebar sections on mobile

Support
#1

Is it possible to hide the Social Icon section in my sidebar in mobile view. I figured out how to hide the actual social grid but the header stays.

#2

Hi Tashera,

Thank you for writing in, yes that is possible, first use your browser’s Developer Toolbar and find the ID of your Text Widget containing the social icons.

Then formulate your CSS Media Queries, you can find examples of CSS Media Queries here.

For the CSS code, I suggest that you get started with this tutorial, the CSS rule that you need to apply on your Text Widget is display: none;

You can add custom CSS under Theme Options > CSS

Hope it helps,
Cheers!

#3

My first two widgets have the same class. I tried to make them different but it changed the look of the sections. I put everything back as it was but I’m not sure what to use as the class id.

#4

I have this code to get rid of the social grid but its the headers that have the same class id.

@media(max-width:480px){
.x-sidebar .social-grid {
display: none !important;
}
}

#5

Hi Tashera,

To hide the social section in the mobile device you need to replace your code with this code given below.

@media(max-width:480px){
.x-sidebar #text-6 {
display: none;
}
}

You can add custom CSS under Theme Options > CSS

The purpose of providing the custom CSS to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.

Thanks

#6

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.