Hi. do we have any css expert /designer here ? need some help with some css.
the related thread is here:
https://toolset.com/forums/topic/mobile-checkbox-css-and-gap/#post-565127
Pls let me know if we have a solution or workaround on this please. thanks in advance .
Ultimately, writing the CSS to support your custom site design is up to you. It's going to be tricky because the checkboxes are different sizes depending on the browser / device, and the margins and padding change depending on screen widths. I can offer this set of overrides as a starting point:
@media (max-width: 991px) and (min-width: 480px) {
.js-wpv-filter-form-51 .checkbox input[type="checkbox"].lv_house_type_cbox {
top: -4px;
/* this is where you add or modify any overrides to checkboxes at 480 - 991 pixel widths */
}
}
@media (max-width: 479px) {
.js-wpv-filter-form-51 .checkbox input[type="checkbox"].lv_house_type_cbox {
top: -4px;
/ * this is where you add or modify any overrides to checkboxes at widths up to 479px */
}
}
@media (min-width: 992px) {
.js-wpv-filter-form-51 .checkbox input[type="checkbox"].lv_house_type_cbox {
height: 22px;
left: -5px;
top: -4px;
width: 22px;
margin: 0;
padding: 0;
/* this is where you can add or modify any overrides to checkboxes at widths 992px and greater. */
}
}
Try adding that to the Layouts CSS panel. I played around with it in Chrome and it seems to look okay at different resolutions, but I didn't do a thorough cross-browser test.
Hi Christian,thanks for looking into this.
but the troubled check box is not this, this perfectly able to style it . its the check boxes at the "District Filter" tab/accordion inside the main search accordion.
Okay take a look at the screenshot here. I am able to modify the styles for these checkboxes using this CSS:
.categorychecklist .lv_sf_dist_ele {
top: 3px;
position: relative;
}
If you want to apply this CSS at certain screen dimensions, you must use media queries. Please let me know if I have misunderstood what you're trying to accomplish, and provide screenshots showing what is wrong. Thanks!
Hi Chris , thanks , the problem i managed to solve it yesterday , basically by cleaning all the messy codes and start all over with simple styling.
Kindly remove the images attached above. have a great day mate.
