How do I change the form width?

Community Forums Forums Design Tips and Tricks How do I change the form width?

This topic is: not resolved

This topic contains 6 replies, has 2 voices, and was last updated by  Marcy 8 months, 3 weeks ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #88767

    ryans
    Participant
    Post count: 7

    I know this is a simple thing to do, I just don’t know how to do it!

    Take a quick look at http://www.RyanShell.com. Specifically, look at the email box down by the footer. Notice how the email box and subscribe button are really wide? How do I reduce the size? How and where to do so would be a massive help.

    Sorry for such a rookie question.

    http://RyanShell.com
    #88788

    Marcy
    Participant
    Post count: 381

    In your style.css line 323 is this section of code:

    input,
    select,
    textarea {
    	background-color: #fff;
    	border: 1px solid #ddd;
    	color: #000;
    	font-size: 20px;
    	font-weight: 400;
    	padding: 16px;
    	width: 100%;
    }

    It is the width: 100%; that makes the form input so wide.

    You will want to find the section for the Enews Extended plugin, near line 783.
    Find this CSS:

    .enews-widget input {
    	font-size: 18px;
    	margin-bottom: 20px;
    }

    And add a smaller width like
    width: 50%;
    so it looks like this

    .enews-widget input {
    	font-size: 18px;
    	margin-bottom: 20px;
            width: 50%;
    }

    Then in one of the smaller @media sections, like below – @media only screen and (max-width: 480px) {
    you will want to add this to make it full width on phones:

    ` .enews-widget input {
    width: 100%;
    }`


    #88799

    ryans
    Participant
    Post count: 7

    Marcy, thank you so much. That worked perfect!

    One catch though. The edit made the sign up form I’ve included in the after post section to be left justified. See an example here, http://www.ryanshell.com/one-of-my-worst-pr-nightmares/. Any idea how I can get that section centered?

    #88800

    ryans
    Participant
    Post count: 7

    Shucks, I just noticed that the change also shrunk the sign up box in the sidebar. Can that be fixed as well?

    #88806

    Marcy
    Participant
    Post count: 381

    Sorry about that; I meant to look to see if you used the enews plugin elsewhere.

    So try this, so it only changes width on the home page. Note that I returned the first code section to what the default theme had.

    .enews-widget input {
    	font-size: 18px;
    	margin-bottom: 20px;
    }
    .home .enews-widget input {
           width: 50%;
    }

    Then in the media query section you would just use:

    .home .enews-widget input {
           width: 100%;
    }

    #88820

    ryans
    Participant
    Post count: 7

    Marcy,

    I made those changes, but it doesn’t seem to be impacting the sidebar. Any ideas?

    #88847

    Marcy
    Participant
    Post count: 381

    I still see this:

    .enews-widget input {
        font-size: 18px;
        margin-bottom: 20px;
        width: 50%;
    }

    You have to find that in your style.css (I see it on line 794) and remove that width: 50%, so that it is

    .enews-widget input {
        font-size: 18px;
        margin-bottom: 20px;
    }

    and right below that add
    .home .enews-widget input {
    width: 50%;
    }


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

You must be logged in to reply to this topic.