How do I change the form width?

[ryans]

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

[Marcy]

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%;
}`

---

Marcy | Amethyst Website Design | Twitter

[ryans]

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?

[ryans]

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

[Marcy]

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%;
}

---

Marcy | Amethyst Website Design | Twitter

[ryans]

Marcy,

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

[Marcy]

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%;
}

---

Marcy | Amethyst Website Design | Twitter

[Author]

Posts