WordPress.org

Ready to get started?Download WordPress

Forums

Adjust text width on custom page 2011 child theme (20 posts)

  1. befree22
    Member
    Posted 2 years ago #

    I created a custom page at prosocialroi.com/confirmation with help from WP Codex and tipsandtricks tutorial.

    The page is designed to act as a sales page or a confirmation page so the full width is displayed and there's no sidebar -- see http://pastebin.com/3NTvyxY4.

    In the .css I added the following code to adjust the width of the text to 70% of the page width:

    .confirmation {width: 70%;}

    However, the text didn't readjust to 70%. I tried other properties like the following but the text isn't readjusting:

    .confirmation {width: 70%; margin-left:auto;
    margin-right:auto;}

    What am I missing?

  2. esmi
    Forum Moderator
    Posted 2 years ago #

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

  3. befree22
    Member
    Posted 2 years ago #

    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;">

  4. WPyogi
    Volunteer Moderator
    Posted 2 years ago #

    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!

  5. WPyogi
    Volunteer Moderator
    Posted 2 years ago #

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

  6. befree22
    Member
    Posted 2 years ago #

    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.

  7. WPyogi
    Volunteer Moderator
    Posted 2 years ago #

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

  8. alchymyth
    The Sweeper & Moderator
    Posted 2 years ago #

    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.

  9. befree22
    Member
    Posted 2 years ago #

    @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?

  10. befree22
    Member
    Posted 2 years ago #

    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]http://i45.tinypic.com/34fmume.png[/IMG]

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

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

  11. WPyogi
    Volunteer Moderator
    Posted 2 years ago #

    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.

  12. befree22
    Member
    Posted 2 years ago #

    @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.

  13. WPyogi
    Volunteer Moderator
    Posted 2 years ago #

    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.

  14. befree22
    Member
    Posted 2 years ago #

    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

  15. WPyogi
    Volunteer Moderator
    Posted 2 years ago #

    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.

  16. befree22
    Member
    Posted 2 years ago #

    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.

  17. WPyogi
    Volunteer Moderator
    Posted 2 years ago #

    Look at all the errors on the page.

  18. alchymyth
    The Sweeper & Moderator
    Posted 2 years ago #

    here is the validation report of the 'optin' page:
    http://validator.w3.org/check?uri=prosocialroi.com%2Foptin&charset=%28detect+automatically%29&doctype=Inline&group=0

    this is an extreme amount of extreme errors.

    please work your way from the top of that list to the bottom and try to fix as many errors as you can.

    http://codex.wordpress.org/Validating_a_Website

  19. befree22
    Member
    Posted 2 years ago #

    Hi guys, I'll work on cleaning up the css errors. In the meantime, could you tell me why site isn't loading in IE? Is it because I'm lacking the IE code in the header.php? Or is the problem related to the errors?

  20. WPyogi
    Volunteer Moderator
    Posted 2 years ago #

    It's the MARK-UP errors that are the major problem -- though there are many CSS errors too. And YES, they are messing up the page in IE.

    this is an extreme amount of extreme errors

Topic Closed

This topic has been closed to new replies.

About this Topic