What are the functionalities of display flex and block?

I am having trouble with my CSS setup. I have an outer container that wraps around an inner container, which in turn contains two divs. The inner container has a display property of flex, but for small screen sizes, I want the two divs to stack up and display block instead. I tried using media queries to achieve this, but it's not working as expected. Can anyone help me understand what I'm doing wrong? Also, when should I give a max-width to my image?

 .row2{
        display: flex;
        padding:2em 3em;
        }
        .outercontainer{
          background-color: darkgray;
        }
        @media (min-device-width: 426px) and (max-device-width: 764px) and (-webkit-min-device-pixel-ratio: 2) {
          .row2{
            display: block;
            padding: 0.1em;
            }
            .image2{
              width: 100%;
            }
        }
        <div class="outercontainer">
                    <div class="innercontainer row2">
                        <div class="col text">
                            <h3>title text</h3>
                            <p>This is simple test text This is simple test text This is simple test text This is simple test text This is simple test text This is simple test text</p>
                        </div>
                        <div class="col image">
                        <img class="image2" src="https://images.unsplash.com/photo-1441974231531-c6227db76b6e?ixid=MXwxMjA3fDB8MHxzZWFyY2h8Mnx8bmF0dXJlfGVufDB8fDB8&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60" />
                        </div>
                    </div>
                </div>

htmlcss

Answer №1

To achieve a stacked "column" layout on smaller viewports in your Flexbox container .row2, add the property flex-direction: column inside your media query. This will ensure that the image appears below the text. Consider adjusting the max-width value to around 1000px so that the column layout is triggered earlier and prevents the text from getting squished next to the image. Give it a try.

It's worth noting that the device-width media feature is deprecated. Instead, opt for using min-width and max-width for specifying length values in your media queries.

.row2 {
  display: flex;
  padding:2em 3em;
}
.outercontainer {
  background-color: darkgray;
}

/* Adjust max-width to prevent text squishing */
@media (min-width: 426px) and (max-width: 1000px) and (-webkit-min-device-pixel-ratio: 2) {
  .row2 {
    display: flex;
    flex-direction: column;
    padding: 0.1em;
  }
  .image2 {
    width: 100%;
  }
}
<div class="outercontainer">
  <div class="innercontainer row2">
      <div class="col text">
          <h3>title text</h3>
          <p>This is simple test text This is simple test text This is simple test text This is simple test text This is simple test text This is simple test text</p>
      </div>
      <div class="col image">
      <img class="image2" src="https://images.unsplash.com/photo-1441974231531-c6227db76b6e?ixid=MXwxMjA3fDB8MHxzZWFyY2h8Mnx8bmF0dXJlfGVufDB8fDB8&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60" />
      </div>
  </div>
</div>

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

I am attempting to activate the "about us" button on the website. I have successfully included the path and added a router link to the containing div of the button. However, there seems to be something

In my app, the first step involves specifying the path in the routing module. Following that is defining the home component, then the app component, and finally creating the button using HTML. Setting up the path in the app.routing.module.ts file <div ...

javascripthtmlangularangularjstypescript

Create a vibrant stroke and conclude with a circular marker beneath the content with CSS

Can you create a vibrant line with a dot underneath text using CSS, similar to the example shown in the image? The underline should begin with some spacing or padding. .underline { text-decoration: underline; text-underline-offset: 10px; displa ...

htmlcssbootstrap-5

Jquery enables smooth image transitions when changing classes

I am seeking assistance with implementing a simple transition effect on hover/out for a div box to switch between the first image .image-main and the second one image-hover. The current setup works properly, but I am unsure how to incorporate a mouseOn/mou ...

htmljquerycssbootstrap-5transition

Unveiling the Mystery: How Browser Thwarts Server Push in HTTP/2.0

After studying the documentation of HTTP/2.0, I discovered that it is feasible to completely close a referenced stream using the RST_STREAM frame. Check it out here: ()! I am curious about how this feature can be implemented in popular web browsers such a ...

javascripthtmlwebbrowser-controlhttp2

When the add button is clicked, I would like to implement a feature where a checkbox is added

When the user clicks on the link "출력하기", I want the web page to add a checkbox to all images. I wrote this code, but it's not working. Can anyone help me? This is my JS: $(document).ready(function(){ $("#print").on('click', fu ...

javascripthtmlimagecheckbox

Click here to access the identical page

Longtime follower of stackoverflow but only my second time posting a question. Here is the code I am currently working on: echo "<td><a href = 'http://localhost/map/index.php' value='$id' >Delete</a></td>"; ...

phphtml

Storing HTML in a Database

I've encountered an issue while attempting to parse through an HTML file that consists solely of tags. I wrote a function to extract the content between these tags, and while I'm able to display it on the page without any problems, inserting th ...

phphtml

What exactly defines a progressive mobile website?

Currently, I am involved in a project that focuses on creating a responsive website that can be accessed across different platforms and browsers, including Mobile, Desktop, and Tablet. While browsing through a blog, I came across the term "Progressive Mo ...

jqueryhtmlwebresponsive-design

modifying the identification value in HTML and then reverting it

Although this may seem like messy code, I'm really in need of assistance with a problem that has stumped me. Currently, I am working on an E-shop project where I have modals for displaying products. Within these modals, there is a button that allows u ...

javascripthtml

Is there a way to embed HTML code within a JavaScript variable?

Embedding HTML code within Java Flow can be quite interesting For instance: Check out this JSFiddle link And here's how you can incorporate it into your script: widget.value += ""; Generating a Pro Roseic Facebook POP-UP Box through Widg ...

javascripthtml

What is the best way to delete a div element from a list

Check out the following code snippet. <div id="list"> <div class="a">1</div><div class="b">1</div></div> <div id="list"> <div class="a">2</div><div class="b">2</div></div> <div id= ...

jqueryhtml

What is the best way to add a box shadow to just one side of an element?

Is there a way to apply an inset box-shadow to only one side of a div? I am specifically referring to an inset shadow, not the usual outer box-shadow. For instance, in the JSFiddle below, you can observe that the inset shadow is visible on all four sides, ...

css

CSS animation: Final position once the vertical text has finished scrolling

I have designed a CSS-animated headline with a leading word and three vertically-scrolling/fading statements to complete the sentence, inspired by the style used on careers.google.com. The animation runs through three cycles and stops, leaving the third st ...

htmlcsscss-animations

CSS: Struggling to properly position two flex items

I'm having some trouble with the alignment in my flex container. The title is perfectly centered, but the breadcrumb content is not aligning correctly. Specifically, I want the breadcrumbs to be right-aligned and positioned 25px from the top within t ...

htmlcssflexbox

Display the actual runtime hyperlink while utilizing the asp tag helper

Whenever I use asp-tag helpers to create a hyperlink, the result is displayed like this: <a asp-page="/demo">Demo</a> The actual html output looks like this: <a href="/test/Demo">Demo</a> However, instead of displaying "Demo" to ...

c#htmlasp.net-core

Resolving background div alignment issue in ASP.NET

I am facing a rather straightforward issue that requires resolution. I am currently working on fixing a background div (<div class="main-background">) that contains an image on my webpage. While it displays correctly in Design View in Visual Studio, ...

htmlcssasp.net

MUI: Set the height of the div element to dynamically expand based on its content

I am currently working on styling a React app with MUI and I need help figuring out how to make a div's height adjust to its content. Specifically, I have a Card component that contains a Button. Upon clicking the Button, the content below the Card ge ...

cssreactjsmaterial-ui

Iterating through elements to set the width of a container

I am currently working on a function that dynamically adjusts the width of an element using JavaScript. Here is my JavaScript code: <script> $('.progress-fill span').each(function(){ var percent = $(this).html(); if(per ...

javascriptjqueryhtmlcss

The variable in Angular stopped working after the addition of a dependent component

Currently, I am working with Angular and have implemented two components. The first component is a navigation bar that includes a search bar. To enable the search functionality in my second component (home), I have added the following code: HTML for the n ...

javascripthtmlangulartypescript

Creating movement in three distinct divisions

I am seeking a way to have three divs flying in upon click. The first DIV is positioned at the top, followed by one on the left and one on the right (both being below the top one). I wish for them to fly in from their respective directions - the top div fr ...

javascriptjqueryhtmlcss