The flex-wrap property with a value of "nowrap" does not seem to

I am struggling with making the page responsive. The flex-wrap: nowrap property seems to be causing issues. Can someone please assist me in identifying the root of the problem?

.logo {
    text-decoration: none;
    color: white;
}

.header {
    width: 100%;
    max-width: 960px;
    min-width: 460px;
    min-height: 100px;
    margin: 0 auto 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    box-sizing: border-box;
}

.logo {
    background: black;
    width: 150px;
    min-height: 50px;
    align-items: center;
    display: flex;
    flex: none;
    margin: 0 10px 40px;
    justify-content: center;
}

.contnet {
    background: black;
    min-height: 50px;
    font-size: 20px;
    color: white;
    margin-bottom: 40px;
    flex-basis: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.bottom-content {
    min-height: 50px;
    display: flex;
    flex-wrap: wrap;
    flex: auto;
    background: black;
    width: 100%;
    color: white;
    font-size: 20px;
    justify-content: center;
    align-items: center;
}

.main {
    width: 100%;
    max-width: 960px;
    min-width: 430px;
    display: flex;
    flex: auto;
    margin: auto;
    box-sizing: border-box
}

.grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.griditem {
    margin-bottom: 30px;
    display: flex;
    flex-basis: calc(33.33% - 20px * 2/3);
    flex-wrap: wrap;
}

.img {
    width: 200px;
    height: 200px;
    background-color: black;
    margin: 0 auto;
}

.title {
    text-align: center;
}

.grid-content {
    flex: 0 1 100%;
}

.text {
    text-align: center;
}

.footer {
    width: 100%;
    background-color: black;
    max-width: 960px;
    min-width: 460px;
    margin: 0 auto;
    padding: 15px;
    color: white;
    text-align: center;
}

.img {
    color: white;
}

@media screen and (max-width: 800px) {
    .contnet {
        display: none
    }

    .griditem {
        flex-wrap: nowrap;
        flex-basis: 100%;
    }
    .img {
        flex: 0 0 auto;
    }

    .griditem:nth-child(even) {
        margin: 0 0 0 30px;
        order: 2
    }
    .footer{
        display: none
    }

    .griditem:nth-child(odd) {
        margin: 0 30px 0 0;
    }
}
<hrader class="header">
        <a href="" class="logo">Logo</a>
        <div class="contnet">Content</div>
        <div class="bottom-content">2</div>
    </hrader>
    <main class="main">
        <div class="grid">
            <div class="griditem">
                <div class="img">1</div>
                <div class="grid-content">
                    <h1 class="title">Title</h1>
                    <p class="text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Distinctio neque magnam amet, praesentium vel illum error autem voluptatibus veniam consequuntur.</p>
                </div>
            </div>
        </div>
        <div class="grid">
            <div class="griditem">
                <div class="img">2</div>
                <div class="grid-content">
                    <h1 class="title">Title</h1>
                    <p class="text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Distinctio neque magnam amet, praesentium vel illum error autem voluptatibus veniam consequuntur.</p>
                </div>
            </div>
        </div> <div class="grid">
            <div class="griditem">
                <div class="grid-content">
                    <div class="img">3</div>
                    <h1 class="title">Title</h1>
                    <p class="text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Distinctio neque magnam amet, praesentium vel illum error autem voluptatibus veniam consequuntur.</p>
                </div>
            </div>
        </div>
    </main>
    <footer class="footer">
        Footer
    </footer>

Fiddle: https://jsfiddle.net/q9bcpr4L/

Answer №1

Ensure flexibility with main by adding flex-wrap, and customize the size of grid with flex-basis

  .main {
      width: 100%;
      max-width: 960px;
      min-width: 430px;
      display: flex;
      flex: auto;
      flex-wrap:wrap;
      margin: auto;
      box-sizing: border-box
  }

  .grid {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      flex-basis: calc(33.33% - 20px * 2/3);
  }

Answer №2

Is this what you're looking for? Here are the changes I made:

  1. Moved the elements with classes .title and .text inside the .grid-content element.
  2. Added flex-wrap: wrap to the .main selector.
  3. Corrected some typos in the code.
...
...

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

Issue with Ng-style not functioning properly when setting background color

I am struggling to set the background of an element using a configuration object with ng-style. For some unknown reason, I can't seem to make it work and I'm finding it really perplexing. The element I'm attempting to configure: <div id ...

The application of knockoutjs bindings is restricted to specific ids and cannot be used on any

In my project, I have multiple views where each one applies bindings to its own tag individually. Here is a snippet of the code: (Please note that some code has been omitted for brevity. For a more complete example, you can view the full fiddle here: http ...

Using jQuery to check if the input time is empty

Why is this code not functioning properly? I have filled the input but it still triggers an alert saying 'empty'. <label for="">New ETA:</label> <input type="time" class="neweta"> <input ty ...

Show values in an angular template using an array

I want to showcase values of an array using *ngFor const blockData = [ {text: sampleText1, array: [val1]}, {text: sampleText2, array: [val2, dat2]}, {text: sampleText3, array: [val3, dat3]} ] <div *ngFor="let data of blockData"> ...

The chosen option does not equal the value retrieved by using jQuery's

I am perplexed by the situation at hand. It seems that there is a discrepancy in the selected option of my select element. Despite appearing as the empty default option on top, the inspected element reveals it displaying a value of 13. https://i.sstatic.n ...

Modifying the verbiage in the menu based on location

Could anyone provide some assistance or guidance on how to solve a small issue I'm facing? I would like the text in my navigation to change depending on my position on the site (position1, position2 etc.) Here is a fiddle link for reference: http:// ...

jquery asynchronous image loading technique

Can images be loaded asynchronously while the page is loading? The images will only be displayed when a user clicks on a button, rather than immediately showing up. As a result, I am curious if it's feasible to preload the images in a cache so that th ...

Ensure the header remains fixed when scrolling in an HTML page with Bootstrap

I created the following code. However, when I scroll down the table, the header disappears from view. I would like the header to always remain at the top, even when scrolling. Despite searching Google multiple times and trying various solutions, I have no ...

Can Javascript be used to identify the number of td elements in a table and specify column widths within the table tags?

Is there a way to automatically add the "col width" tag based on the number of td tags within a Table tag? For example, if there are 2 td's, then it should add 2 "col width", and if there are 3 then, 3 "col width", and so on. <!DOCTYPE html> &l ...

How can I generate rotating images using jQuery or JavaScript similar to the one shown here?

http://www.example.com/ On a website similar to example.com, I noticed that when hovering over one of the topics listed, the image rotates. I am interested in creating this interactive effect using either jQuery or JavaScript. Is there a method to access ...

Hide the 'white' color on visited links and category tags in the WordPress blog page

I created a custom WordPress theme, and I am having trouble styling the bootstrap navigation. I want the text to be white and change to brown when selected. However, my attempts to add a separate class for H1 tags on the blog post page have not been succes ...

Curating personalized designs within a content management system

Currently, I am developing a SaaS platform that will feature customized styles for user accounts. The current method involves using YAML to create unique stylesheets for each account. However, as the number of accounts increases, I am starting to question ...

"Implementing a dynamic image thumbnail list with adjustable opacity effects and the ability to add or remove classes

I found a script on another post, but it's not working correctly in my implementation. Everything is functioning properly except that the "selected" class is not being stripped, causing the thumbnails to remain highlighted after being clicked. Here is ...

Having trouble loading xml/xsl files on IE11? Consider enabling compatibility mode to ensure smooth rendering on your xml/xsl page

On my website, I have a page that displays XML from an XSL document. Strangely, it works perfectly on IE8 but not on IE11 - the page appears blank even though the XML is present when viewing the source. Interestingly, if I enable compatibility mode for the ...

Determining the precise location of the div element

I am seeking to determine the precise positions of a div based on its class name. In the screenshot provided, my script for finding the div's position is highlighted in yellow, while the div I am targeting is highlighted in red at the bottom. Currentl ...

When a HTML file is piped or streamed into a browser, it is displayed as plaintext

I'm currently working with an Express handler router.get('/', ac.allow('Admin'), function (req, res, next) { let html = path.resolve(__dirname + '/../coverage/lcov-report/index.html'); fs.createReadStream(html).pip ...

Arranging information within the Ngb-Accordion

Welcome to the code snippet showcasing how to create an accordion in Angular: <ngb-accordion [closeOthers]="false" activeIds="0"> <ng-container class="card" *ngFor="let post of Posts"> <ngb-panel title="{{post.title}} - ...

Guide on excluding certain words within a paragraph using PHP

In my database, there is a paragraph that looks like this: $str ="this is a paragraph i show shortly and when i click on the view more it will show completely for that i am using the ajax and retrieve it " I display it as follows: this is a paragrap ...

Shifting an image within a div using HTML5 and CSS3

I am wondering how to position the image 50px from the top and 50px from the left within the div. Should I use padding for this? <header> <img src="logo.png" alt="" /> </header> header { width... height: background: (url) } ...

Text is not visible when hovering over it

I am facing an issue with the hover effect on my menu element. When I hover over the element, the text does not appear as expected. Even after using z-index to position the text on top, it still doesn't work. Here is a snippet of my code: HTML: < ...