html - CSS text-container displayed in row instead of columns - Stack Overflow

admin管理员组

文章数量:1404927

I can't figure out on why the text box to the right of the picture is displayed in rows instead of columns

(The second button isn‘t necessary anymore. :))

Picture of what it is supposed to look like:

What it should look like

@import url('+Gummy:ital,wght@0,100..900;1,100..900&display=swap');

:root {
  --ff: 'Sour Gummy', cursive;
  --color-primary: hsl(230, 50%, 90%);
  --color-primaryheader: hsl(230, 50%, 85%);
  --color-secondary: hsl(230, 50%, 10%);
  --color-tertiary: hsl(290, 80%, 20%);
  --color-accent: hsl(170, 80%, 20%);
  --h1: bold 64px/72px var(--ff);
  --h2: bold 48px/56px var(--ff);
  --p: 24px/32px var(--ff);
}

body {
  margin: 0;
  background-color: var(--color-primary);
  color: var(--color-secondary);
  font: var(--p);
}

.content {
  max-width: 1280px;
  margin: 100px;
  display: flex;
  flex: 1;
  gap: 40;
  align-items: center;
}

.text-content {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.primary-btn {
  background: var(--color-accent);
  color: var(--color-primary);
  padding: 20px 40px;
  text-decoration: none;
  font-weight: bold;
  border-radius: 10px;
}

img {
  width: 100%;
  height: auto;
}

/* Media query to adjust layout for smaller screens */
@media (max-width: 800px) {
  .content {
    flex-direction: column;
  }

  .text-content,
  .image-content {
    min-width: 100%;
  }
}

<div class="content ">
  <div class="text-content">
    <h1>Rehome Your Dog with Compassion</h1>
    <p>At Happy Paws, we understand that sometimes, due to unforeseen circumstances, families can no longer
      care for their beloved dogs. We are here to help ensure your pet finds a safe and loving new home. </p>
    <div class="button-container">
      <a class = "primary-btn" href="">Submit a surrender request</a>
    </div>
  </div>
  <div class="image-content">
    <img src="img's/t-r-photography-TzjMd7i5WQI-unsplash.jpg" alt="">
  </div>
</div>

I can't figure out on why the text box to the right of the picture is displayed in rows instead of columns

(The second button isn‘t necessary anymore. :))

Picture of what it is supposed to look like:

What it should look like

@import url('https://fonts.googleapis/css2?family=Sour+Gummy:ital,wght@0,100..900;1,100..900&display=swap');

:root {
  --ff: 'Sour Gummy', cursive;
  --color-primary: hsl(230, 50%, 90%);
  --color-primaryheader: hsl(230, 50%, 85%);
  --color-secondary: hsl(230, 50%, 10%);
  --color-tertiary: hsl(290, 80%, 20%);
  --color-accent: hsl(170, 80%, 20%);
  --h1: bold 64px/72px var(--ff);
  --h2: bold 48px/56px var(--ff);
  --p: 24px/32px var(--ff);
}

body {
  margin: 0;
  background-color: var(--color-primary);
  color: var(--color-secondary);
  font: var(--p);
}

.content {
  max-width: 1280px;
  margin: 100px;
  display: flex;
  flex: 1;
  gap: 40;
  align-items: center;
}

.text-content {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.primary-btn {
  background: var(--color-accent);
  color: var(--color-primary);
  padding: 20px 40px;
  text-decoration: none;
  font-weight: bold;
  border-radius: 10px;
}

img {
  width: 100%;
  height: auto;
}

/* Media query to adjust layout for smaller screens */
@media (max-width: 800px) {
  .content {
    flex-direction: column;
  }

  .text-content,
  .image-content {
    min-width: 100%;
  }
}

<div class="content ">
  <div class="text-content">
    <h1>Rehome Your Dog with Compassion</h1>
    <p>At Happy Paws, we understand that sometimes, due to unforeseen circumstances, families can no longer
      care for their beloved dogs. We are here to help ensure your pet finds a safe and loving new home. </p>
    <div class="button-container">
      <a class = "primary-btn" href="https://www.happypaws/surrenderform">Submit a surrender request</a>
    </div>
  </div>
  <div class="image-content">
    <img src="img's/t-r-photography-TzjMd7i5WQI-unsplash.jpg" alt="">
  </div>
</div>

I first figured how to put the pic and the text-container side by side but then it messed up the grid of the things inside the box.

• html
• css
• flexbox

Share Improve this question Follow edited Mar 9 at 9:51 user23116310 asked Mar 9 at 9:16 user23116310user23116310 111 bronze badge 5

• You mean to the left? – mplungjan Commented Mar 9 at 9:36
• I edited the post, yes the box to the left of the picture inside the webpage is supposed to be structured like in the picture added to the post – user23116310 Commented Mar 9 at 9:45
• We can't seem to reproduce your problem. Could you try you code on some different browsers of devices to see if it is just your current browser? – oosh Commented Mar 9 at 10:47
• @oosh I can: imgur/a/ooEJryt – mplungjan Commented Mar 9 at 11:30
• @user23116310, you don't happen to be working in a very very old browser hat doesn't support these 'newer' features? Or do you have an extension/add on to your browser that happens to change your styling? This seems to be a problem on you end. – oosh Commented Mar 9 at 21:11

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

1. I've ran your code and test it in multiple screen sizes, and it doesn't represent the problem in the images, you're setting the flex-direction property of the .text-content element to column, I really cannot think of a way it will result in a row.
2. Also, there's no second button, there is only one anchor tag but its text wraps.

(The second button isn‘t necessary anymore. :))

本文标签： htmlCSS textcontainer displayed in row instead of columnsStack Overflow