Below Header Widget Area - Responsive Widgets

Hello,

I’m using Sydney Pro and have the below header widget area activated. I’ve added the categories (dropdown) and search widgets and added custom CSS to get them side by side and enlarged the boxes. However, I noticed when I resize to a mobile phone, the boxes aren’t responsive and stay the same size. Do you have any additional code that would make them responsive?

Website: http://heritagebanknwblog.com/

Thanks!

Hello there,

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

@media only screen and (max-width: 991px) {
  .header-widgets .widget,
  .header-widgets .widget form {
    width: 100% !important;
    max-width: 100% !important;
  }

  .header-widgets #cat.postform,
  .header-widgets label,
  .header-widgets .search-field {
    width: 100% !important;
  }  
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .header-widgets .widget {
    width: calc(50% - 60px);
    width: -moz-calc(50% - 60px);
    width: -webkit-calc(50% - 60px);
    width: -o-calc(50% - 60px);
    float: left;
  }
  .header-widgets .widget.widget_search {
    float: right;
  }
}

Let me know how it works for you.

Regards,
Kharis

Thank you, thank you! That worked perfectly.

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis