What is the reason for these block elements appearing next to each other instead of on separate

When the browser window is less than 768px, I am trying to have the yellow and green block elements appear on different lines using a media query. Despite setting the display property to block for responsive view, nothing seems to change. Even when applying this style to all elements in mobile view, the desired outcome is not achieved.

Aren't block elements supposed to be 100% wide and displayed on a single row?

#newsletter-wrap {
    width: 100%;
    height: auto;
    background: lightgrey;
    float: left;
    display: flex;
justify-content: center;
align-items: center;
    font-size: 22px;
    font-weight: 300;
    padding: 25px 25px;
    box-sizing: border-box;
}
#newsletter-wrap > *, #newsletter-wrap > form > * {
    display: inline;
    vertical-align: middle;
}
#newsletter-button {
border: none;
border-radius: 6px;
padding: 10px 20px;
    border: 1px solid #333;
    cursor: pointer;
}
input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
#mce-EMAIL {
    background: pink;
    width: 300px;
    height: 25px;
    margin: 0 25px;
    border: 1px solid #333;
    text-align: center;
    padding: 4px;
}
#mc-embedded-subscribe-form {
    background: green;
    width: auto;
    text-align: center;
    height: auto;
    float: left;
}
#newsletter-wrap-text {
    background: yellow;
    width: auto;
    height: auto;
    float: left;
}


/* MOBILE */
@media handheld, screen and (max-width: 768px) {
    /* ISSUE LIES HERE */
    #newsletter-wrap-text, #mc-embedded-subscribe-form {
        display: block;
    }
}
<section id="newsletter-wrap">
        <div id="newsletter-wrap-text">wuf wfbrie erig ergibw eiwbfwe wef00x0 __W)9.</div>
        <form action="https://eiurfhyergv.us17.list-manage.com/subscribe/post?u=8c38151fa33f984127db5705c&amp;id=4c741659e1" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<input type="email" placeholder="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
<div id="mce-responses">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div>
<input type="submit" value="Subscribe" name="subscribe" id="newsletter-button">
</form>
    </section>

htmlcss

Answer №1

When you have applied display: flex to the parent section container, it is necessary to include flex-direction: column; to ensure that the child elements are displayed in a column rather than a row. However, if the use of display: flex is not essential, you can simply retain the block elements as they are. It is typically assumed that the implementation of flex serves a specific purpose such as responsiveness.

Moreover, there is no need for float: left in this context. I recommend tidying up the CSS code by eliminating unnecessary styles. For instance, using both floats and display: inline, only to later override them with display: block, is redundant.

#newsletter-wrap {
    width: 100%;
    height: auto;
    background: lightgrey;
    float: left;
    display: flex;
    flex-direction: column;
justify-content: center;
align-items: center;
    font-size: 22px;
    font-weight: 300;
    padding: 25px 25px;
    box-sizing: border-box;
}
#newsletter-wrap > *, #newsletter-wrap > form > * {
    display: inline;
    vertical-align: middle;
}
#newsletter-button {
border: none;
border-radius: 6px;
padding: 10px 20px;
    border: 1px solid #333;
    cursor: pointer;
}
input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
#mce-EMAIL {
    background: pink;
    width: 300px;
    height: 25px;
    margin: 0 25px;
    border: 1px solid #333;
    text-align: center;
    padding: 4px;
}
#mc-embedded-subscribe-form {
    background: green;
    width: auto;
    text-align: center;
    height: auto;
    float: left;
}
#newsletter-wrap-text {
    background: yellow;
    width: auto;
    height: auto;
    float: left;
}


/* MOBILE */
@media handheld, screen and (max-width: 768px) {
    /* BELOW HAS A PROBLEM */
    #newsletter-wrap-text, #mc-embedded-subscribe-form {
        display: block;
    }
}
<section id="newsletter-wrap">
        <div id="newsletter-wrap-text">wuf wfbrie erig ergibw eiwbfwe wef00x0 __W)9.</div>
        <form action="https://eiurfhyergv.us17.list-manage.com/subscribe/post?u=8c38151fa33f984127db5705c&amp;id=4c741659e1" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<input type="email" placeholder="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
<div id="mce-responses">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div>
<input type="submit" value="Subscribe" name="subscribe" id="newsletter-button">
</form>
    </section>

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

What is the best way to merge different sets of CSS media queries?

In CSS Media queries, you have the option to use , (for "or") and and to meet media query criteria. For instance: @media (min-width: 768px) and (min-resolution: 2dppx) { ... } But what if you wish to combine and and , within the same media query? An exam ...

cssmedia-queriesretina-displaydevicepixelratio

Connecting HTML pages on two different drives on the same computer: Is it possible?

Is it possible to create hyperlinks between HTML pages located in two different folders on separate drives (for example, one in Drive:C and another in Drive:E) on the same computer? I can navigate up multiple directories and to different folders or subfol ...

html

Loading all the content and scripts from one page into another

Are you looking for a seamless way to view and book our scuba diving programmes without having to navigate away from the main page? If so, we understand your desire for convenience. Instead of redirecting you to separate pages when you click on buttons li ...

phphtmlajaxload

In my Vue application, I've noticed that when I implement a select tag, the drop-down icon mysteriously vanishes in Chrome

I'm currently working on a Vue.js project with Vuetify. However, I've encountered an issue where the drop-down icon disappears when using a select tag. <template> <select class="select"> <option v-for="item ...

javascripthtmlvue.jsvuetify.js

Can someone explain the method for displaying or concealing a menu based on scrolling direction?

https://i.stack.imgur.com/tpDx0.jpg I want to hide this menu when scrolling down and show it when scrolling up. The code for my menu bot is: <script> var previousScroll = 0; $(window).scroll(function(event){ v ...

javascriptjqueryhtmlcss

Tips for designing scrollable overlay content:

I am currently in the process of building a page inspired by the design of Hello Monday. Right now, I have added static content before implementing the parallax effect and auto-scroll. Here is my progress so far: Check out the Sandbox Link One challenge ...

javascripthtmlcssoverlay

The icon must be aligned to the right and able to adapt to different

I'm attempting to align a Font Awesome icon to the right while keeping an input field aligned to the left on the same line. Both elements should be responsive and maintain their positions. I've created a sandbox and an image showcasing how it cu ...

cssbootstrap-4iconsalignment

How can you use HTML, CSS, and JavaScript to group objects with one color and then change the color of one specific object?

I have a set of 6 labels that act as buttons. When one is clicked, it changes from white to blue. If another label is clicked, the previously blue label turns white and the newly clicked one turns blue. Currently, the code below sets all labels to white b ...

javascripthtmlcss

Obtain the name of the current view in ASP.NET MVC 5 using Razor on the .cshtml side

As a student who is new to ASP.NET MVC and coming from ASP.NET Web Forms, I am accustomed to it. Here is the list: <ul class="sidebar bg-grayDark"> <li class="active"> <a href="@Url.Action("Index", "Home")"> < ...

c#cssasp.netasp.net-mvcrazor

Switch up the color of the following-mouse-div in real-time to perfectly complement the color that lies underneath it

I am trying to create a div that changes color based on the complementary color of whatever is underneath the mouse pointer. I want it to follow the mouse and dynamically adjust its color. This functionality is similar to what Gpick does: https://www.you ...

javascriptjquerycss

Achieving a sleek line effect with a gradient border

Is there a way to make the gradient border transition between two colors look like a straight line? Additionally, is it possible to have the line start in the bottom left corner instead of the middle of the right side of the button? The current CSS code I ...

cssgradientlinear-gradients

Want to learn how to center a webpage only for a specific device width? For example, have your mobile device display the content in the center, while

Hello! I'm new to the world of @media queries and am currently trying to make my webpage responsive by centering it on smaller devices while keeping the display normal on larger screens. My website, mastercontrolunit.com, looks great in deskto ...

htmlcss

What technique is used to fill these circular progress indicators?

I stumbled upon some circular progress bars and I'm a bit confused about how they are filled. Check out this codepen link: https://codepen.io/anon/pen/aeEEmx From what I understand, when using gradients with specified positions (degrees in this case) ...

htmlcssgradient

Steps for making a button with both an image and text:

I am in the process of designing a basketball-themed website and I am looking to incorporate custom icons/buttons that link to various pages on the site. My vision is to have a unique button that features a circular image with accompanying text below it. ...

htmlcss

I'm currently designing pop-up notifications for a project I'm developing. The button appears on screen, but for some reason, the pop-up feature isn't functioning as intended

`I am currently working on a game project for my class, aiming to create a nostalgic web-based choose-your-own-adventure game similar to the ones I enjoyed playing years ago. I want the experience to be challenging, where making the wrong decisions could l ...

javascripthtmlcsssyntaxpopup

Transitioning the color of links in Firefox causes flickering when switching between the hover and visited state

I have been working on testing this code snippet in Firefox 49.0 on Linux Mint: a{ font-size:50px; color:gray; font-weight:1000; transition:color 1s; } a:hover{ color:black; } a:visited{ color:lightgray; } <a href="">VISITED LINK</a>&l ...

cssfirefox

Enhance the functionality of your website by implementing a zoom feature

I am looking to dynamically change the CSS of a div using jQuery when it is clicked. The challenge I am facing is that there are multiple divs with the same class and I am unable to modify their classes as they are created dynamically using PHP. <div ...

jqueryhtmlcss

The content within the textbox remains locked until the user interacts with the textbox by clicking on

Is there a way someone can assist me with this task? I am looking to make it so that the values in the textbox cannot be changed or removed until the textbox is clicked. Does anyone have any insights on how to achieve this? ...

javascripthtml

Accessing the DOM element from an AJAX response using JavaScript

After receiving an AJAX response containing HTML, how can I extract a specific element from the DOM using JavaScript? The issue I'm facing is that when I try to use getElementById on the returned HTML div, it returns null. It appears that the DOM has ...

javascripthtmlajaxdom

Arrange the assortment of varying sized badges in a straight line

I have a variety of badges representing users. Some users have images displayed as blocks while others are represented by text inline. https://i.sstatic.net/BtDgo.png Within the container, we have the following structure: <div class="align-self-cente ...

htmlcsstwitter-bootstrapvertical-alignmenttwitter-bootstrap-4