Mobile Width Css Help

Anonymous

#255303

Hello,

I have some css knowledge and have tried to put together css for reducing the size of the filters widget on mobile. I am using the search and filter shortcode on an elementor shop page. On mobile, I want to reduce the size of the filters and move them to the left of the products. Here is the URL you can check out on a mobile device: https://elizabethg11.sg-host.com/southern-wines/all-wines/

Below is the css snippet I am trying to implement. Is there something missing from it? I’ve tried both min-width & right-padding but neither worked.

Thank you!

@media (min-width: 600px) {
.searchandfilter[data-sf-form-id=“6646”]
min-width: 50px;
}

Trevor

#255348

That CSS looks wrong. The first bit of code you appear to need is this:

.searchandfilter[data-sf-form-id="6646"] ul {
  padding-left: 0;
}

The CSS you gave me should surely be max-width, not min-width, if it is for mobile only?

And it is missing a pair of curly braces:

@media (min-width: 600px) {
  .searchandfilter[data-sf-form-id="6646"] {
    min-width: 50px;
  }
}

Can you show me one or more annotated screenshot(s) of the design change(s) you want? If you can do that, you would need to upload the screenshot image(s) to a file sharing site (like the WordPress Cloudup site) and share the link with me?

Anonymous

#255386

This reply has been marked as private.

Trevor

#255492

Try adding this additional CSS:

.searchandfilter[data-sf-form-id="6646"] select.sf-input-select {
    min-width: auto;
}
.searchandfilter[data-sf-form-id="6646"] li.sf-field-search input,
.searchandfilter[data-sf-form-id="6646"] li.sf-field-search label,
.searchandfilter[data-sf-form-id="6646"] .select2-container {
  max-width: 100%;
}

Anonymous

#255597

Thank you that works!! You can close this thread 🙂

[Author]

Posts