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

The arrangement vanishes when using identical html/css coding

When using the same HTML/CSS coding, the layout disappears and appears misaligned on one page but works perfectly on another. The issue seems to be that the first section of the main area is getting a width of 938px instead of 5px. I've tried adding w ...

What is the best way to make a container 100% tall and display a navigation bar?

Struggling to properly render my React page This is what I have: ReactDOM.render( <React.StrictMode> <Provider store={store}> <Router /> </Provider> </React.StrictMode>, document.getEl ...

The AppJS warning: A potentially dangerous JavaScript attempt to access a frame with a URL

I am currently working on a desktop application where I am trying to filter specific divs inside an iframe using AppJS. However, I am facing an issue with hiding some of the div elements. Here is the code snippet: <!DOCTYPE html> <html> <s ...

Tips for broadcasting the blob

I am currently working on a radio system project that involves streaming live audio from a microphone to the user in real-time. However, I am new to using node.js and unsure of how to achieve this. Can anyone provide guidance on how to stream the audio fro ...

Creating a binary tree in vanilla JavaScript and styling it with HTML and CSS

I'm facing a challenge with my homework. I am required to convert my JavaScript binary tree into HTML and CSS, strictly using vanilla JavaScript without any HTML code. I have the tree structure and a recursive function that adds all the tree elements ...

The Facebook like button seems to be missing from the webpage

Hi everyone, I'm having trouble getting the like button code to work. I used the wizard on Facebook but the button still isn't showing up, even with a simple HTML setup like this: <!DOCTYPE html> <html> <head> </head> < ...

What is the best way to center an image and text vertically using bootstrap?

I'm currently working on a Bootstrap website and have reached a section where I want to display text on the left and an image on the right. While I've managed to achieve this layout, I'm struggling with vertically centering the image. Despit ...

Conceal an entire div using CSS, especially if a portion of it remains unoccupied

Is there a way to conceal an entire division if a part of it is void? For instance, if "dd" is empty as indicated below, can I hide the entire class "test" so that the keyword Restrictions does not display either? I attempted .test dd:empty { display: none ...

Making a dropdown menu spin using Jquery and Javascript

I am in need of a unique solution for a dropdown menu that appears rotated 90 degrees anticlockwise. The goal is to have the dropdown select "button" text displayed vertically, with the options sliding out in a similarly rotated, sideways manner featuring ...

What's the reason for not being able to customize classes for a disabled element in Material-UI?

Currently, I am utilizing Material-UI to style my components. However, I am facing challenges when trying to customize the label class for disabled buttons. Despite setting a reference as "&$disabled", it does not yield the desired results. import Rea ...

"Unfortunately, SimplyScroll isn't functioning properly on this particular page

What is the reason for simplyscroll not being able to handle this div with nested divs? EXTRA INFORMATION The scrolling functionality does not work. Clicking on the buttons doesn't trigger any scrolling. Changing the contents of the div to plain tex ...

Numerals for Central Leaflet Marker

Is there a way to effectively center numbers inside markers? Here is the current situation: View Marker with Number How to Create a Marker return L.divIcon({ className: "green-icon", iconSize: [25, 41], iconAnchor: [10, 44], popupAn ...

I am developing a JWT authentication and authorization service for my Angular application. However, I am running into issues when trying to implement observables

I have created a user class and required interfaces as outlined below: user.ts import { Role } from '../auth/auth.enum' export interface IUser { _id: string email: string name: IName picture: string role: Role | string userStatus: b ...

Obtaining JSON data using Jquery results in the output of "undefined"

I am struggling to extract the correct values from a JSON document in order to display schedules in list view. Currently, when accessing the JSON document, I keep receiving "undefined" as the result. Below is an example of the JSON document: { "Ferries": ...

Error: The specified module is missing an export that was requested

Hello, I encountered an error in my console that reads: "Uncaught SyntaxError: The requested module './components/tileHeader/controller.js' does not provide an export named 'tileHeader'". Below is the code snippet causing the issue: co ...

Populate the dropdown menu with data from a JSON file

Recently, I created a custom JSON file and wanted to populate a select>option using this data. However, I encountered an error message saying: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at file:///C:/.../p ...

Alter the color of Material UI Raised Button when it is hovered over

I am trying to change the background color of a raised button on hover in Material UI. I attempted the following, but it did not work. Is there a way to modify the background color in Material UI for a raised button? Example.JS <RaisedButton ...

Issues arise with AJAX authentication request

Currently, I'm working on incorporating a basic login form with an AJAX request that forwards the user to a page for querying my database. Depending on the results, the user is then redirected to the main index page or prompted back to the login form. ...

Utilizing the '<' or '>' operator in combination with an if statement within a Repeater component

Is it possible to use an if statement in a repeater like this? <%#Eval("FN").ToString().Count > 0 ? "SB" : "" %> When I try to implement this, I receive an error 73 indicating that the > operator cannot be used. How can I adjust it so that i ...

Is it not possible to use a hyperlink and the general sibling combinator simultaneously?

Hi everyone, I'm completely new to CSS so please bear with me as I try to explain my issue. I'm attempting to create an image hyperlink using the .link class. I want the images for both .link and .picture to "change" when I hover over the hyperl ...