[Résolu] mobile checkbox css and gap

[Auteur]

Publications

[Akhil]

Hi, Luo, could you check my site front end pls.

i need help with some minor CSS

1. the check box the gap is very big, I'm trying to get it narrower. it's at tab " District Filter" .
I've try line-height, height etc, I think maybe GP theme is crossing the style.

thanks.

[Akhil]

Pls test is in mobile view 320px / 480px wide at lease.

[Luo Yang]

Dear C6410,

It is a custom CSS problem, I assume we are talking about your website:
lien caché
please point out the problem page URL, how and where I can see the problem:
the check box the gap is very big, I'm trying to get it narrower. it's at tab " District Filter" .
I've try line-height, height etc, I think maybe GP theme is crossing the style.

I need to test and debug it in my browser. thanks

[Akhil]

HI Luo.

its at the same like as before

lien caché

click the accordion "Landed House Search" its in the last accordion.
I think you can use the firebug/web dev tools for this .

Again pls view in responsive mobile 320/480px wide for testing as the code/adjustment is for this mobile view.

thanks.

[Luo Yang]

I assume we are talking about the vertical gap between each checkbox, I tested it in my Chrome browser, you can try to modify the CSS file:
lien caché
line 872, from:

.sg-dist-divv .children li {
    display: inline-block;
    margin-left: 0px;
    width: 99%;
    font-size: 10px;
}

To:

.sg-dist-divv .children li {
    display: inline-block;
    margin-left: 0px;
    width: 99%;
    font-size: 10px;
    margin-top: -5px; /* add this line*/
}

And test again, see screenshot mobile-checkbox.JPG

[Akhil]

Hi, thanks. i wil check this. i dont think its that straightforward though. anyway

Pls be cautious with my url , google is picking it up , and pls remove the images as well. many thanks.

[Akhil]

Hi Luo , i checked again the max value for margin-top is -2px, after that -3px...-5px no responce. there is some other classes that limiting this bootstrap checkboxes.

i need the checkboxes to be closer possible with a small horizontal gap.

thanks

[Akhil]

Hi Luo. the difference is this particular area is a taxonomy.
the rest of the custom fields check box i could style it easily.

[Luo Yang]

Thanks for the details, the URL has been replaced. I am checking it in your website, will feedback if there is anything found

[Akhil]

Thanks , Kindly remove the images too 🙂

[Luo Yang]

You need to apply CSS codes to the checkbox field, for example:

.filter-list input[type="checkbox"] {
    margin: 0px;
    padding: 0px;
}

see screenshot mobile-checkbox2.JPG

[Akhil]

hi. Luo. thanks for looooking into this. Unfortunately the result it still the same. thanks

[Akhil]

HI, my big guess that this css code need to go into a loop rather then direct styling.
Do we have any designer for toolset can look into this please ?
thanks.

[Luo Yang]

OK, as your request, I will check it with our designer, and will update this thread if there is anything news.

[Akhil]

Hi. Luo. ive manage to get the problem solved. kindly please remove all images. thank you. i will close this topic soon. thanks