Form Font Size

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #10044583
    wardsdesign
    Participant

    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.

    Thanks as always for the help.



    Template Version: 10.0
    #10044587
    Support
    Keymaster

    Hello, it’s using the class custom-select-1, so you can add this:

    .custom-select-1 select {
        line-height: 20px !important;
        font-size: 14px !important;
        padding: 12px !important;
    }

    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.


    #10044593
    wardsdesign
    Participant

    Thanks for the help. I added the class to <div> like this:

    <div class=”col-lg-2 custom-select-1″>

    <select class=”form-select form-control-sm form-fields-font-size-sm h-auto py-2″ id=”select”>
    <option value=”#”>Sort by:</option>
    <option value=”https://gosolut.com/products.html”>Sort by Capacity</option>
    <option value=”https://gosolut.com/products2.html”>Sort by Item Number</option>
    </select>
    </div>

    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?


    #10044597
    Support
    Keymaster

    You can adjust that css the way you want:

    .custom-select-1 select {
        line-height: 20px !important;
        font-size: 14px !important;
        padding: 12px !important;
    }

    You can add only font-size in that customization, removing line-height and padding if you want.


Viewing 4 posts - 1 through 4 (of 4 total)

This topic is marked as "RESOLVED" and can not rceive new replies.