The forums are closed and will be removed when we launch our new site.
Looking for support? You can access the support system via your account.
Forums › Forums › Search & Filter Pro › mobile css
Tagged: mobile css
- This topic has 11 replies, 2 voices, and was last updated 3 years, 11 months ago by Trevor.
-
Libby Gorman(Private) September 23, 2020 at 7:31 pm #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 Moderator(Private) September 24, 2020 at 7:19 am #260619The 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?
Libby Gorman(Private) September 29, 2020 at 2:17 pm #261303Hi 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 Moderator(Private) September 29, 2020 at 6:46 pm #261353This reply has been marked as private.Trevor Moderator(Private) September 30, 2020 at 12:19 pm #261415I can see that CSS being used here:
https://www.screencast.com/t/mewejdTOVAwt
It seems to be working to me?
Libby Gorman(Private) September 30, 2020 at 1:35 pm #261428Hi, 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 Moderator(Private) September 30, 2020 at 1:40 pm #261430That 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.
Libby Gorman(Private) September 30, 2020 at 1:44 pm #261432I 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 Moderator(Private) September 30, 2020 at 1:52 pm #261436This:
.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; }
-
AuthorPosts
The forum ‘Search & Filter Pro’ is closed to new topics and replies.