How do I control spacing within a WordPress page that I am editing?

1 Views

Very simply, how do I control spacing between objects on a WordPress page?

Specifically, I am attempting to remove the whitespace between the green boxes in the image below:

Read More

Screenshot: http://goo.gl/doZve
Page: http://bellairecabinets.com/new/

I would like the image with the phone number (top) to connect to the form (bottom). I checked the CSS that applies to the form and there is no margin. There is also no breakspace in the HTML code or the WordPress WYSIWYG.

Why the white space?

Also, when entering wrong info and clicking submit, you receive an alert above the form. This moves the entire layout down. How can I fix this? Is there a way to simply change the alert to appear in a popup box instead of on the page?

Thanks!

Post Views: 1

Related posts

Leave a Reply

2 comments

  1. The white space is due a margin-bottom: 15px; present in the paragraph element inside the div with class video-sub. The paragraph also has a line-height of 20px.

    Add this to your CSS:

    .video-sub p
{
    line-height: 0;
    margin-bottom: 0;
}

    To align the green box with the slideshow, do this:

    .video-sub
{
    padding-top: 0;
}

    For a CSS popup, you can do this:

    .form-error
{
    background-color: white;
    left: 0;
    margin: 0 auto;
    padding: 10px;
    position: fixed;
    right: 0;
    top: 30px;
    width: 980px;
    z-index: 1;
}

    I think you can replace the above code with this one that will take care of the error and form sent messages:

    #contact-form-4758
{
     background-color: white;
     left: 0;
     margin: 0 auto;
     padding: 10px;
     position: fixed;
     right: 0;
     top: 30px;
     width: 980px;
     z-index: 1;
}

  2. Extra spacing in WordPress content is often caused by the WordPress automatic paragraph code. This is a function named wp_autop(), its purpose is to add HTML breaks paragraphs where line feeds occur in the input. There are ways to turn it off or make it only apply when wanted. Search the WordPress forums or autop.