0 szavazat
(120 pont) által 

CSS:

.blurb img {
  height: 7.5rem;
}

.blurb h3 {
  font-weight: 700;
}

.blurb div {
  font-family: 'Muli', sans-serif;
}


.blurb::after {
  content: "";
  display: block;
  height: .1875rem;
  width: 25vw;
  margin: 1.5rem auto;
  background-color: #444349;
}

@media (min-width: 768px) {

  .blurb {
    display: inline-block;
    width: 30%;
    padding: 1.5rem;
    margin: .5rem;
  }

  .blurb::after {
    display: none;
  }

}

HTML:

<section class="locations">
      <h2>Location</h2>
      <div class="blurb">
        <h3>Ceremony</h3>
        <img src="https://orange.codeberryschool.com/content/images/project-assets/wedding-landing-ceremony.png" alt="Ceremony">
        <div>St. Nicholas Church</div>
        <div>2 Trinity Square, Budapest</div>
        <h3>Photos</h3>
        <img src="https://orange.codeberryschool.com/content/images/project-assets/wedding-landing-photoshoot.png" alt="Photos">
        <div>Liberty Bastion</div>
        <div>23 Wisdom Road, Budapest</div>
        <h3>Party</h3>
        <img src="https://orange.codeberryschool.com/content/images/project-assets/wedding-landing-party.png" alt="Party">
        <div>Heaven Lounge</div>
        <div>14 Fairy Street, Budapest</div>
    </section>

1 válasz

0 szavazat
(220 pont) által 

Szia!

Az a gond, hogy azoknak az elemeknek kell inline-blocknak lenniük, amelyeket egymás mellé akarod tenni. De azoknak mindegyiknek, tehát ezt a három "dobozt" be kell mind csomagolnod inline blockba.

A CSS-ed rendben van, itt a javított HTML. Ha nem fér ki a három egymás mellé, akkor a widhten kell visszavenned.

<section class="locations">
    <h2>Location</h2>
    <div class="blurb">
        <h3>Ceremony</h3>
        <img src="https://orange.codeberryschool.com/content/images/project-assets/wedding-landing-ceremony.png" alt="Ceremony">
        <div>St. Nicholas Church</div>
        <div>2 Trinity Square, Budapest</div>
    </div>
    <div class="blurb">
        <h3>Photos</h3>
        <img src="https://orange.codeberryschool.com/content/images/project-assets/wedding-landing-photoshoot.png" alt="Photos">
        <div>Liberty Bastion</div>
        <div>23 Wisdom Road, Budapest</div>
    </div>
    <div class="blurb">
        <h3>Party</h3>
        <img src="https://orange.codeberryschool.com/content/images/project-assets/wedding-landing-party.png" alt="Party">
        <div>Heaven Lounge</div>
        <div>14 Fairy Street, Budapest</div>
    </div>
</section>
...