Adjust text width on custom page 2011 child theme

Try using Firefox with the Firebug add-on for this kind of CSS work.
https://getfirebug.com/

Hi esmi,

I’ve got firebug.

In WP admin page, I added the following div tag above the text but that didn’t fix it. I also replaced the css with

#confirmation {width=400px;}

<div id=”confirmation” class=”confirmation” style=”margin: 10px 10px 10px 10px; width=”400px;” border=”0px solid #ffcc00″; background-color=”none;”>

That div is not rendering correctly on the page — have you looked at it?

Try validating the page for mark-up errors — there are MANY!

What are you trying to set to 70% width? The whole page or just an inside section?

I want to adjust the inside section only — the text area cause it doesn’t look good stretched the entire width of the page. I’ll check the errors with the css validator.

I was referring to the 240 mark-up errors, though I’m guessing there are CSS problems too.

style.css is broken due to a missing closing bracket } here:

line-height: 1.4em;
	padding: 10px 10px;
	width: 168px;

/* =Add a sidebar to pages and single posts
-------------------------------------------------------------- */

add the } after the 168px; line.

that error stops the styles coming lower in style.css from being applied.

@alchymth, now that was a glaring error I made and it’s fixed now. I then retried

.confirmation {width: 40%;} and I tried #confirmation {width: 40%} in .css and either property works — ie. text is adjusted to desired width.

WPyogi alerted me to hundreds of markup errors that I have to clean up. What’s worse, the site’s not displaying in IE at all. I doubt that the errors are causing the IE problem — what do you think?

Now, how do I fix the form text to display correctly on page? I want the text to be on one line and not broken into 2 lines
ex. I’ll show you how to quickly list your business FREE!

The form text displays perfectly on an html page –> view [IMG]https://i45.tinypic.com/34fmume.png[/IMG]

However, the form isn’t displaying correctly on the WordPress 2011 child theme page –> see –> [IMG]https://i46.tinypic.com/21oav5j.png[/IMG]

Here is the form code on the WordPress page: https://pastebin.com/zVyrbrza

The form problem is because the text widget the form is inside of is set to be 30.85% width of the containing element (set by the width of the #page) — so the width is only 261px. So the space for the form is too small and thus cuts it off.

BTW, in Firefox on a Mac, the top line (“I’ll show you…FREE”) is not visible at all on the page.

@wpyogi

Could you tell me where to change the width of the text widget? Please understand that I pasted the form from a html page into a WordPress page using the html, not visual pane.

FYI: When I think of text widgets, I think only of sidebar widgets, not widgets in the main content area aka body container.

There are three widgets in that section of the page — the html code is this:

<div id="first" class="widget-area" role="complementary">
<div id="second" class="widget-area" role="complementary">
<div id="third" class="widget-area" role="complementary">

They are all coded to have the same width and margins, so you’ll have to add CSS code for individual widgets — so the total still adds up to no greater than 100%. Here is the CSS code for all of them:

#supplementary.three .widget-area {
    float: left;
    margin-right: 3.7%;
    width: 30.85%;
}

You really need to use Firebug to be able to “see” the relevant CSS code when making changes like this.

BTW, that whole section of code is in the footer, not the main section of the page.

I have no problems with the 3 widget areas in the footer section and yes, I do use firebug. My issue is with the form displaying in the main content area of prosocialroi.com/optin

Please view the 2 images I already posted or visit the webpage

That section (including the form) is in the footer — not the main content area — just FYI.

Actually, that page has multiple head sections, multiple body sections and multiple footer sections, among the major code errors.

You evidently copied a lot of code into places where it totally does not belong. Unless you fix those fundamental errors, you will continue to have major problems with the page.

The page that the form is on is a custom page template. The custom page template acts as a post page where I can add content via wp admin. The content content area is full width (no sidebar) but the header and footer code are included. I can remove the footer area from this template so you see that I’m not writing in the footer area.