My website, powered by Wordpress, is currently experiencing an issue with excessive whitespace being added to the bottom of the contact form 7 plugin. I am perplexed as to the cause of this issue and

Recently, I've come across an issue with my contact form 7 plugin, which has been integrated into the front-page.php file using the code below:

<div id="contact" class="pad-section">
  <div class="container">
    <h1>Contact Us</h1>
    <?php echo do_shortcode('[contact-form-7 id="180" title="Request A Quote"]'); ?>
  </div><!-- container -->
</div><!-- contact -->

The problem lies in the excessive whitespace appearing below the submit button. Upon closer inspection of the code, it seems that the cause is related to

<img class="ajax-loader" src="http://foxpile.net/wp-content/plugins/contact-form-7/images/ajax-loader.gif" alt="Sending ..." style="visibility: hidden;">

I'm puzzled by this unforeseen behavior and have attempted to troubleshoot by deactivating other plugins, but to no avail. Interestingly, when I tested the form on a separate page, it worked flawlessly (you can click the Start Your Project link at the top to see for yourself).

Contact Code from Stylesheet

/* Contact */
#contact { }

#contact .container {
    font-size: 12px;
}

Answer №1

It seems like the issue lies here:

media="all"
.pad-section img {
   width: 100%;
}

By removing this in the DOM through inspect element, the extra padding was resolved. You could change the value to "none" or simply delete the ".pad-section img" class entirely.

media="all"
.pad-section img {
   width: none;
}

Alternatively, try removing the class altogether and see if that works.

Answer №2

Could you please provide the CSS code for the contact form? I have a feeling that the issue lies within the CSS styling. My initial assumption is that there might be too much padding applied somewhere in the code. Look out for lines similar to: padding: ...px; or padding-left: ...px; (something along those lines). Consider decreasing the value. For example, if it's currently set at 300px, try reducing it to 50px and observe the changes!

(By ..., I mean a specific numerical value followed by 'px', such as 13px)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Are there any jQuery plugins available that can display a loader image while a page is loading?

After extensive research on Google, I have been unable to find the plugin I need. If you are aware of any suitable plugins, please let me know. Thank you in advance! ...

Unable to shift to the side while in full flexibility mode

I ran into an issue with my code, shown in the image below. I am trying to position 1 on the left and 2 on the right, but something seems off. Can you spot the problem? <div className="mt-5 mx-5 py-3 shadow bg-white"> &l ...

Fluid image background failing to display properly in Firefox browser due to CSS compatibility issues

I'm currently working on implementing a fluid image background for one of my webpages. It's functioning perfectly in Chrome, but I can't seem to get it to work in Firefox. The goal is to have two squares with PNG images that resize proportio ...

Instructions for integrating an if statement into a PHP function to detect and return an error signal when the input is empty

I'm fairly new to PHP and I could really use some guidance. I've implemented this code on my WordPress website to display the latest posts that members have visited. Everything works smoothly, except for when a user hasn't visited any posts ...

Methods for dynamically populating dropdown lists with JavaScript and Bootstrap

I have collected all 387 regions for the current date and now I want to dynamically populate a bootstrap dropdown with these regions using JavaScript. Below is the basic HTML code for a bootstrap dropdown: <div class="dropdown"> <button class ...

Output based on conditional regex in Jquery

Can I use regex and jQuery to dynamically replace numbers within square brackets with images based on the number? For example: [1] would be replaced with <span><img src="1.png"></span> If we have [11], it should turn into <span>& ...

Display a list exclusively with radio button options

Currently, I am developing a module that allows the admin to view a list of candidates who have requested approval. The interface includes radio buttons for three different selections and a submit button. However, I would like to update this functionality ...

How about having a surprise image pop up when you click a button?

I've been working on coding a button that can change the background of my webpage to display a random image. Initially, my code seemed functional, but it was only displaying the last image listed in my series of if/else statements. I suspect that usin ...

Utilizing jQuery to dynamically add a class based on specific criteria

I need help with the following scenario: <span class="dateStart" val="0">2016-09-16</span> | <span class="dateStart" val="1">2016-09-15</span> | Can anyone guide me on how to use jQuery to add a selected class to the <span> ...

Preventing the elements within a div section from shifting position

I am facing an issue with a div section that contains multiple <a href=""> tags. When I shrink the div section on the page, the contents move when a user tabs into it. Is there a way to lock the div section so that its contents do not move? For exam ...

Is there a way to change TextBox multiline to uppercase in Opera browser?

Does anyone know how to convert TextBox multiline to Uppercase in Opera? I tried using "text-transform:uppercase" but it only seems to work with IE ...

Is there a way to arrange the components of my form so that the questions are positioned on the left side and the choices are displayed on the right

As I am creating a form, my goal is to align the information within it in a way that places the questions on the left side and the options on the right. I have experimented with utilizing IDs, centering them, and adjusting their positioning from left to r ...

Inquiries for Web-Based Applications

As I contemplate coding my very first webapp, I must admit that my skills are somewhere between beginner and intermediate in html, css, js, jquery, node, sql, and mongodb. However, the challenge lies in not knowing how to bring my vision to life. My ulti ...

Ways to retrieve a designated object linked to a specific value within a JavaScript structure

I am facing a challenge where I need to set a javascript property object with values from another property object within the same instance. Currently, I have the following object: var PLAYER = { slides: { { slide_id: 60, slide_content: 'c ...

Seeking advice on a coding dilemma: What is the best way to enable users to click on each item in a list they submit

Hey there, I'm no expert in this field so I could really use some help with my PHP document. Here's the situation: I have a PHP document that includes a form. Every time a user submits text into the input field, the text is echoed as a list item ...

Tips on building a blog using solely index.html, style.css, and script.js files

Looking for inspiration for blog listing pages? Check out some examples like: HubSpot's marketing blog or iGoMoon's blog. I'm trying to figure out where I should start. Should I begin with the first line of code? Or can I import sample code ...

Adjust the size of the mouse cursor in real time

I'm currently in the process of developing a project where I want to create a web application with a mouse cursor that appears as a circle with a customizable radius, which can be altered by the user. The main requirement is for this custom cursor to ...

Methods for smoothly animating an image to move up and down using CSS

I'm new to CSS and I was wondering if it's possible to create a smooth vertical movement effect for an image using CSS. Something like shown in this link: .... ...

Refresh selected items after inserting data via ajax in CodeIgniter

I have a select list on my view that allows users to add new items using a plus button. However, when a new item is added, the list does not refresh. I don't want to refresh the entire page with an ajax query. Instead, I am trying to implement a metho ...

When I submit a form with an empty date input field, the Datepicker is sending a 0000-00-00 date

[I am experiencing an issue with my date input field. When I submit without entering any value, the date on the view page shows as 0000-00-00 instead of being empty or blank.] <div class="col-sm-3 col-sm-offset-1"> <div class="input-group"& ...