Home › Forums › WoodMart support forum › CSS code for better positioning the filter elements on (some) mobiles

CSS code for better positioning the filter elements on (some) mobiles

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • October 5, 2020 at 5:31 am #230861

    www.cidev.ro
    Participant

    Hello team,

    Would you please be kind and help out with a CSS code which would position all the filters on one line each and the button underneath? I’m struggling to find the winning code 🙂 The issue occurs between 369 and 436px, so I guess the code should look something like: 

    @media only screen and (min-width: 369px) and (max-width: 436px)  {	
	.woodmart-pf-btn {
		;
	}
}
*/

    Please find image attached to see how it looks like now, and how I’d like it to look, if possible, of course. If you are able to help even more, the button can have the same width as the forms, if possible.

    Thank you so much for all your support so far.

    Kind Regards,

    Cidev Team

    Attachments:
    You must be logged in to view attached files.
    October 5, 2020 at 11:47 am #230980

    Elise Noromit
    Member

    Hello,

    Please try this code CSS: 

    body .woodmart-product-filters .woodmart-pf-checkboxes {
    flex: 1 1 100%;
    width: 0;
}

    Best Regards

    October 5, 2020 at 12:42 pm #231009

    www.cidev.ro
    Participant

    Hello again,

    Thank you for your reply. The code you provided DOES change the looks of the form on the desktop version alone (see image attached) – however, I would like it to look like that between 369 and 436px only. I have also tried adding your code using media queries, like: 

    @media only screen and (min-width: 369px) and (max-width: 436px)  {	
  body .woodmart-product-filters .woodmart-pf-checkboxes {
    flex: 1 1 100%;
    width: 0;
}
}

    However, if I try it like this, nothing changes. Thank you again for your effort, I appreciate every reply.

    kind Regards,

    Attachments:
    You must be logged in to view attached files.
    October 5, 2020 at 4:03 pm #231058

    Elise Noromit
    Member

    Hello,

    Your media query does not assume showing the result on the desktop. Add the code to the Theme Settings > Custom CSS > chose the device and insert code without query.

    Best Regards

    October 6, 2020 at 6:34 am #231135

    www.cidev.ro
    Participant

    Thank you Elise!

    This works perfectly!

    Best Regards to you, too, you may please close this ticket.

    October 6, 2020 at 10:11 am #231197

    Elise Noromit
    Member

    You are welcome! If you have any questions please feel free to contact us.

    Best Regards

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘CSS code for better positioning the filter elements on (some) mobiles’ is closed to new replies.