why the flex property is not working properly?-CodePudding

This is my code link:https://github.com/xaviour1504/stats-preview-card and output link:https://xaviour1504.github.io/stats-preview-card/ when I am making my screen smaller the content div is taking full width and the image div is getting smaller, why it is not dividing into equal space when I make the screen smaller.

@import url("https://fonts.googleapis.com/css2?family=Inter&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Lexend Deca&display=swap");
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
    background-color: hsl(233, 47%, 7%);
    font-size: 15px;
}
h1 {
    color: hsl(0, 0%, 100%);
    font-family: "Inter", "sans-serif";
    line-height: 1.5;
    margin-top: 2rem;
}
p {
    color: hsla(0, 0%, 100%, 0.75);
    font-family: "Lexend Deca", "sans-serif";
}
#card {
    max-width: 400px;

    background: hsl(244, 38%, 16%);
    margin: 6rem auto;
    border-radius: 15px;
}
#image {
    /*background: url("./images/image-header-mobile.jpg");*/
  background:url("https://xaviour1504.github.io/stats-preview-card/images/image-header-mobile.jpg");
    width: 100%;
    height: 300px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}
.overlay {
    width: 100%;
    height: 100%;
    background: hsl(277, 64%, 61%);
    opacity: 0.5;
    position: absolute;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}
#content {
    text-align: center;
    margin: 5rem 2rem;
}
#para {
    line-height: 1.5;
    margin: 2rem;
}
/* media queries */
@media (min-width: 600px) {
    #card {
        display: flex;
        max-width: 1200px;
        flex-direction: row-reverse;
        height: 400px;
        margin: 10rem auto;
    }
    #content {
        margin: 40px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: left;
    }
    #image {
        height: 400px;
        max-width: 600px;
        border-bottom-right-radius: 15px;
        border-top-left-radius: 0px;
    }
    .overlay {
        border-bottom-right-radius: 15px;
        border-top-left-radius: 0;
    }
    .stats {
        display: flex;
        gap: 5rem;
        margin: 0 auto;
    }
    p {
        margin-bottom: 30px;
    }
    #heading {
        margin-left: 27px;
    }
    #para {
        margin-top: 20px;
    }
}

<body>
  <div id="card">
    <div id="image"><div class="overlay"></div></div>

    <div id="content">
      <h1 id="heading">
        Get <span style="color: hsl(277, 64%, 61%)">insights</span> that help
        your business grow.
      </h1>
      <p id="para">
        Discover the benefits of data analytics and make better decisions
        regarding revenue, customer experience, and overall efficiency.
      </p>
      <div class="stats">
        <div class="box1">
          <h1>10k </h1>
          <p>COMPANIES</p>
        </div>
        <div class="box2">
          <h1>314</h1>
          <p>TEMPELATES</p>
        </div>
        <div class="box3">
          <h1>12M </h1>
          <p>QUERIES</p>
        </div>
      </div>
    </div>
    -->
  </div>
</body>

CodePudding user response：

If you add a left and right padding to the body, that will stop the card from touching the edge. e.g

body {
 padding: 0 20em;
}

It doesn't have to be 20em, that's just an example.

To get the spacing of the divs inside the card how you want them, you should take a look at this guide to flexbox:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

CodePudding user response：

I added the CSS below to your page and it seems to work fine:

/********************************************************/
/* ADDED */
/********************************************************/
#image, #content{
  flex: 1 0 100%;
  max-width: 100%;
}
#content{
  margin: 0;
}
.stats{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
}
@media (min-width: 600px) {
  #image, #content{
    flex: 1 0 100%;
    max-width: 50%;
  }
}

I set content & image in flex 50% that would always keep the same size.

Then I set your stats into a grid because it was stretching out of the parent.

DEMO

@import url("https://fonts.googleapis.com/css2?family=Inter&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Lexend Deca&display=swap");
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
    background-color: hsl(233, 47%, 7%);
    font-size: 15px;
}
h1 {
    color: hsl(0, 0%, 100%);
    font-family: "Inter", "sans-serif";
    line-height: 1.5;
    margin-top: 2rem;
}
p {
    color: hsla(0, 0%, 100%, 0.75);
    font-family: "Lexend Deca", "sans-serif";
}
#card {
    max-width: 400px;

    background: hsl(244, 38%, 16%);
    margin: 6rem auto;
    border-radius: 15px;
}
#image {
    /*background: url("./images/image-header-mobile.jpg");*/
  background:url("https://xaviour1504.github.io/stats-preview-card/images/image-header-mobile.jpg");
    width: 100%;
    height: 300px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}
.overlay {
    width: 100%;
    height: 100%;
    background: hsl(277, 64%, 61%);
    opacity: 0.5;
    position: absolute;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}
#content {
    text-align: center;
    margin: 5rem 2rem;
}
#para {
    line-height: 1.5;
    margin: 2rem;
}
/* media queries */
@media (min-width: 600px) {
    #card {
        display: flex;
        max-width: 1200px;
        flex-direction: row-reverse;
        height: 400px;
        margin: 10rem auto;
    }
    #content {
        margin: 40px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: left;
    }
    #image {
        height: 400px;
        max-width: 600px;
        border-bottom-right-radius: 15px;
        border-top-left-radius: 0px;
    }
    .overlay {
        border-bottom-right-radius: 15px;
        border-top-left-radius: 0;
    }
    .stats {
        display: flex;
        gap: 5rem;
        margin: 0 auto;
    }
    p {
        margin-bottom: 30px;
    }
    #heading {
        margin-left: 27px;
    }
    #para {
        margin-top: 20px;
    }
}
/********************************************************/
/* ADDED */
/********************************************************/
#image, #content{
  flex: 1 0 100%;
  max-width: 100%;
}
#content{
  margin: 0;
}
.stats{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
}
@media (min-width: 600px) {
  #image, #content{
    flex: 1 0 100%;
    max-width: 50%;
  }
}

<body>
  <div id="card">
    <div id="image"><div class="overlay"></div></div>

    <div id="content">
      <h1 id="heading">
        Get <span style="color: hsl(277, 64%, 61%)">insights</span> that help
        your business grow.
      </h1>
      <p id="para">
        Discover the benefits of data analytics and make better decisions
        regarding revenue, customer experience, and overall efficiency.
      </p>
      <div class="stats">
        <div class="box1">
          <h1>10k </h1>
          <p>COMPANIES</p>
        </div>
        <div class="box2">
          <h1>314</h1>
          <p>TEMPELATES</p>
        </div>
        <div class="box3">
          <h1>12M </h1>
          <p>QUERIES</p>
        </div>
      </div>
    </div>
    -->
  </div>
</body>