I am trying to change the font size from 16px to 14px in the form on this page, so that it matches the menu font size. I tried finding the element that controls it and also tried to create a new span class, but have not been successful.
The form element is the one that says “Sort by:” on the right side of the page. The menu is the one that says “All, Bakery, Pizza”, etc.
When you’re creating a website it’s very usual that you need to find which css is being applied to an element.
The easiest way to find a CSS that is being applied to an element is using the console of your browser.
On this example, let’s see how to use Chrome Developer Tools.
To open Chrome Developer Tools please press F12 on Google Chrome.
On this example you saw that the element “featured-box-icon” is being defined in 2 different files, the first one “blue.css” is the one that sets the color and the other one theme-elements.css (line 950), has all the basic settings of that specific element.
Which does reduce the font size. But it now over-rides the “form-control-sm” which made the form height the same as the menu buttons. Is there a way to do both?