Edit font of mobile search output

Hi @perlfan

Here are example CSS codes that will increase font size to example 18px on FiboSearch mobile overlay:

/* Increase font size for FiboSearch suggestion title */
.dgwt-wcas-overlay-mobile-on .dgwt-wcas-st-title {
	font-size: 18px !important;
}

/* Increase font size for FiboSearch suggestion price and other meta data */
.dgwt-wcas-overlay-mobile-on .dgwt-wcas-sp {
	font-size: 18px !important;
}

/* Increase font size for FiboSearch input field */
.dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input {
	font-size: 18px !important;
}

/* Increase font size for FiboSearch Show all products */
.dgwt-wcas-st-more {
	font-size: 18px !important;
}

Remember that if you want to find the class of a given element, you can always switch to mobile mode and examine the element in the browser. Typically, this mode is under the F12 key or right-click -> inspect and then usign Ctrl + Shift + M will switch you to the mobile view.

Regards,
Kris

Thank you! However this does only increase the mobile font size of “show all products” below the search results. As the results disappear on mouse out, I don’t get the css class of the results fonts size. Frank

Hi @perlfan

You can also try this CSS code:

It will increase the font size of suggestions and price on mobile and desktop versions.

.dgwt-wcas-st {
	font-size: 18px !important;
}

.dgwt-wcas-sp {
	font-size: 18px !important;
}

.dgwt-wcas-sp del {
	font-size: 18px !important;
}

Regards,
Kris

Thx, that worked great. Frank