- This topic has 4 replies, 2 voices, and was last updated 6 years, 2 months ago by
.
Viewing 5 posts – 1 through 5 (of 5 total)
Viewing 5 posts – 1 through 5 (of 5 total)
Mobile Width Css Help
Posted
by
Posted
by
Forums › Forums › Search & Filter Pro › Mobile Width Css Help
Tagged: mobile css
Anonymous.
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;
}
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?
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%;
}