Div text with superfluous line breaks

Whenever a user clicks the sign-up button ("Cadastrar" in Portuguese) on my website, the newsletter form successfully hides. However, there seems to be unnecessary line breaks in the success message. Why is this happening?

I am trying to make sure that the footer area fills the entire height without setting a fixed height for the child div. Additionally, I want the text to be vertically centered within the red box.

To get a better understanding of the issue, you can visit my website, input your email address, and click the submit button below. Below is the HTML code snippet rendered on the site:

<div id="mc4wp-form-1" class="form mc4wp-form mc4wp-form-3571 mc4wp-ajax mc4wp-form-success">
    <form method="post" lpformnum="1" _lpchecked="1">
        <input type="email" name="EMAIL" class="text" placeholder="Seu email" required="">
        <input type="submit" class="bt" value="Cadastrar"><span class="mc4wp-ajax-loader" style="display: none; vertical-align: middle; height: 16px; width: 16px; border: 0px; margin-left: 5px; background: url(/img/ajax-loader.gif) 50% 50% no-repeat;"></span>
        <div style="position: absolute; left: -5000px;">
            <input type="text" name="_mc4wp_required_but_not_really" value="" tabindex="-1">
        </div>
    </form>
    <div class="mc4wp-response">
        <div class="mc4wp-alert mc4wp-success">Obrigado, seu cadastro foi efetuado com sucesso! Por favor verifique seu e-mail.</div>
    </div>
</div>

https://i.stack.imgur.com/A3Gad.png

You can also try reproducing the issue on jsfiddle.

Answer №1

To prevent text from breaking, consider adding the float: left; property to the mc4wp-error selector.

.mc4wp-error {
    background-color: #FEE7ED;
    color: #F41952;
    border-color: #F41952;
    float: left; <----Include this
}

The text may break due to elements like newsletters, input fields, and buttons pushing against each other.

https://i.stack.imgur.com/Ds3Mb.jpg

If you are facing issues with text breaking, try removing the float:left from the following:

footer form {
    width: 100% !important;
    float: left !important; <---Delete this
}

.mc4wp-alert {
    position: absolute;
    top: 0px;
    min-height: 200px;
}

https://i.stack.imgur.com/UaDJX.jpg

For mobile view and CSS changes, adjust the max-width:480px accordingly:

@media (max-width: 480px) {
    footer form {
        float: left !important; <---Remove this
    }

    .mc4wp-alert {
        position: absolute;
        top: inherit;
        min-height: 200px;
        bottom: -90px;
    }
}

https://i.stack.imgur.com/4smwD.png

Answer №2

By updating the following CSS:

.newsletter-popup {
  ...
  ...
  position: relative;
}

with position: fixed;, it becomes apparent that the area is taken up by both the email input field and the submit button. To resolve this issue, opt for position: absolute;. I have personally tested this fix in Chrome and Internet Explorer 11.

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

Integrating tilt and zoom functionality on a web page based on mouse movements

While browsing through some messages on chat, I came across something interesting: I noticed that as I moved my mouse left or right, the content would tilt in that direction, and when moving up and down, the content would zoom in or out. It was a really c ...

Is there a way to align all the content in a Bootstrap card to the center?

Need help centering content in a bootstrap card for my semester project. Can't seem to get it right! If anyone can assist, I would really appreciate it. Also hoping to increase the height of the card if possible. <link rel="stylesheet" href= ...

Design an arrangement using div elements and CSS styling

Creating a layout for a website can be challenging. I am using three div tags - container, left, and right. My goal is to have the left side fixed-width for navigation, while the right side displays dynamic content loaded from a database. However, I'm ...

Cannot Display CSS Background Image Locally

Apologies for the simple inquiry, but I am facing an issue with displaying my background image using background-image:url() in the CSS. Strangely, it does not work with this method, but when I use content:url(); it works just fine. Interestingly, backgrou ...

Bug in Chrome (Win) causing middle-mouse-button overflow issue

Take a look at this demo: http://jsfiddle.net/pixelfreak/AN5Wb/ Everything works perfectly until attempting to scroll using the middle mouse button. At that point, you can see beyond the boundaries of the element. This issue does not occur in Firefox or ...

What is the most effective method for managing the onSelect data within the select tag in Angular's reactive form functionality?

Can someone please advise on the best approach to handling this scenario? I have a form with multiple fields, including a select tag. <form [formGroup]="myForm"> <select formControlName="" > <option *ngFor="let c of countries" value ...

Proper method for adding elements in d3.js

I have a block of code that selects an #id and appends a svg-element into it: var graph = d3.select(elemId).append("svg") .attr('width', '100%') .attr('height', '100%') .append('g') Within th ...

Changing the font color of the status bar in a PWA on Chrome Desktop: A step-by-step guide

We recently developed a Progressive Web App (PWA) for our website and are now looking to customize the status bar font color to white. While we have come across various resources on how to change the background color of the status bar in a desktop PWA on ...

The press of the Enter key does not trigger the button

I'm facing an issue with a form that has just one field for user input and a button that triggers some jQuery to hide the login form when clicked. However, pressing enter after entering text causes the page to refresh... I'm starting to think th ...

Utilizing JavaScript event handlers on dynamically appended elements after the document has finished loading

One issue I am facing is with a javasript function that needs to change the value of an element appended after the document has loaded. The problem arises when trying to intercept actions on a newly appended DIV, such as: <div class="new-div"></d ...

Query Selector(jQuery selector) is a powerful tool for

Here is the HTML Table structure: <table class="display" style="width: 1000px;" id="failoverServers"> <thead> <tr> <th class="row_selector_head"> <input type='checkbox' class='select_all_ch ...

Calculate the total sum of values in a MySQL column and then group the results

I'm currently working on a quiz website and looking to create a leaderboard. The user scores are stored in a database table named 'user_record' with the following structure: 'user_id' - varchar(254) -holds the user id for a score ...

Determine the difference between the starting and ending dates in AngularJS

In my project, I am trying to implement a feature where an error message should be displayed next to the control if the "ToDate" is before the "FromDate". Currently, I have set a minimum date which successfully disables the selection of ToDate before FromD ...

How can I extract information from an HTML table using AngleSharp?

Seeking a way to extract song data from a playlist on a music streaming website This table contains song information: <tr class="song-row " data-id="ef713e30-ea6c-377d-a1a6-bc55ef61169c" data-song-type="7" data-subscription-links="true" data-index="0" ...

Toastr service experiencing issues on Internet Explorer browser

While implementing toastr notifications in my Angular application, I encountered an issue with compatibility across browsers. Specifically, the ngx-toastr module functions properly in Chrome and Firefox, but not in Internet Explorer. Interestingly, it wo ...

How do I switch back and forth between displaying content as 'none' and 'block' using JQUERY?

Take a look at this code snippet. <div class="sweet-overlay" tabindex="-1" style="opacity: 1;display: none;"></div> Is there a way to switch the style attribute value from none to block and back? ...

Tips for altering the class of an HTML button dynamically when it's clicked during runtime

I currently have a set of buttons in my HTML page: <button id="button1" onclick="myFunction()" class="buttonClassA"></button> <button id="button2" onclick="myFunction()" class="buttonClassA"></button> <button id="button3" onclic ...

How to center multiple divs in a row using HTML and CSS

I've been attempting to achieve a pretty basic task, but unfortunately my efforts have fallen short thus far. I have an image and a title that need to be centered within their parent div element. However, I'm struggling to find the proper way to ...

What is the process for submitting a form to a PHP page?

Could you assist me in posting a form with two fields on a php page using $_POST['json']; where the object will be of json type? <div id="result"></div> <form name="form" id="form" method="post" > Name: <input type="text ...

Verify the authenticity of a date using the locale parameter in the Intl API

Seeking advice for validating inputfield based on locale argument. How to format dates differently depending on the specified locale? For example, if locale is 'en-uk' then date should be in mm/dd/yyyy format, but if locale is 'de-ch' i ...