mobile css

Anonymous

#260538

Hi Trevor,

About a month ago you helped me with css styling for my filters form on mobile view. Here is a link to the support thread: https://support.searchandfilter.com/forums/topic/mobile-width-css-help/#post-255492

I have made a new filter form for my category & archive pages and would like to implement the same mobile css for it. I’ve tried copy& pasting the css I used for form [searchandfilter id=”6646″] with the new form id: [searchandfilter id=”7085″] but the css is not applying on my archive pages. Is there a different modification I need to use for the new form’s css?

Thank you

Trevor

#260619

The most common problem is the type of quote marks. Many editors convert one or more of them to curly quotes, which won’t work. If you look carefully in your post on the forum, you can see that the quote mark before each ID number is one such. That is why I place code in forum posts inside code ticks, that stops this from happening, at least in our forum. Email software is particularly bad doing this.

Are you able to send me a live link/URL to your search page so I can take a look?

Anonymous

#261303

Hi Trevor,

Sorry for the late reply but thank you for your help. The quotes may be the issue here and I can try to add the css in a code editor to avoid the incorrect quote marks. Here is the URL for one of my category archive pages where I am trying to apply the css for form ID #7085
https://elizabethg11.sg-host.com/southern-wines/product-category/red/cabernet-sauvignon-red/

Thank you!

Trevor

#261353

This reply has been marked as private.

Anonymous

#261365

This reply has been marked as private.

Trevor

#261415

I can see that CSS being used here:

https://www.screencast.com/t/mewejdTOVAwt

It seems to be working to me?

Anonymous

#261428

Hi, yes there is CSS there for the color but in terms of making the filter columns fit on the mobile view, that is the CSS that doesn’t work.

The first screenshot is the mobile view for my SHOP page with the CSS that you provided: https://paste.pics/8535e7885acff24927b578db40ae7aad

This second screenshot is the mobile view for my ARCHIVE Pages where the CSS Is not applying: https://paste.pics/9dcb129b704d97c772112e14f419b7c2

I just need to match the archive page css to the shop page so that the filters appear better on mobile. Thank you

Trevor

#261430

That was the only CSS I saw for that form in the Customiser. In your screenshot, you can see only one mention of 7085. All the others are for 6646.

Anonymous

#261432

I have already tried a few things with 7085 and none of the CSS worked so I removed it.

Can I leave the current CSS and add “7085” next to where it says “6646” or should I create a whole new line of CSS for the 7085 form?

For example, here’s a piece of CSS – Can I add 7085 next to the 6446 or make a whole new snippet for 7085?

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

I’ve tried different things and haven’t been able to get the columns to fit on mobile for my archive pages, just wondering the best practice for applying it to two different forms, thanks!

Trevor

#261436

This:

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

Would become this:

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

[Author]

Posts