Search code examples
cssfont-sizetext-size

How to make text bigger in all input areas (email signup, comment box, recipe index page dropdown) in CSS?

Website: https://olivesfordinner.com/

Looking for CSS code that will achieve the following:

  1. When typing in email on homepage to sign up for newsletter, making that text appearbigger. It's so small.

  2. When leaving a comment on a recipe post (example: https://olivesfordinner.com/toasted-muesli-recipe/), how to make the text bigger as the reader is typing within it. Again, this text is so small.

  3. How to make the text appear bigger in the drop-down text boxes on the left-hand column. They are so tiny! https://olivesfordinner.com/recipe-index/

Thank you!

I have googled lots of CSS code, but nothing I've found has affected the text size in these areas at all.

Solution

  • Issue 1

    This will increase the font size for your Sign up to get new recipes via email. element

    .enews-form > #subbox {
    font-size: 12pt !important;
}

.enews-form > input[type=submit] {
    font-size: 12pt !important;
}

    Issue 2

    This will fix this issue

    #commentform textarea#comment, #commentform input#author, #commentform input#url {
    font-size: 13pt !important;
}

    Issue 3

    This will fix the dropdown lists

    select#cat, select#archives-dropdown-2 {
    font-size: 12pt;
}

    Notice

    you can add each to the custom css for each page or globally as such

    /* Issue 1 Solver */
.enews-form > #subbox {
    font-size: 12pt !important;
}
.enews-form > input[type=submit] {
    font-size: 12pt !important;
}

/* Issue 2 Solver */
#commentform textarea#comment, #commentform input#author, #commentform input#url {
    font-size: 13pt !important;
}

/* Issue 3 Solver */
select#cat, select#archives-dropdown-2 {
    font-size: 12pt;
}

    Do know that this CSS code will only effect their respective elements, unlike the css code by others' answers.