content/sidebar width on mobile?

[joanna-cheeParticipant]

Hi Han

I use family theme and changed my content and sidebar widths using the following CSS

.content {width: 75%;}

.sidebar-primary {width: 25%;}

This looks fine on pc and tablet but not on mobile. Is there a way to have the sidebar below content on mobile with these widths as with the default Family widths?

You can visit my site http://mumskidsjesus.com on mobile and see what I mean.

Thanks as always for your wonderful help 🙂

Joanna

[hanKeymaster]

Hi Joanna,
Please try below code

.content {width: 75%;}
.sidebar-primary {width: 25%;}

@media screen and (max-width: 768px) {
  .content, .sidebar-primary {width: 100%; float:none; clear:both;}
}

[joanna-cheeParticipant]

Thanks Han…that’s great. It works.

You’re wonderful!

[Author]

Posts