ŽoHo Comments - Answer Overflow

  <div className="grid">
      <figure className="figure">
        <img src={placeholder} alt="placeholder" className="img" />
      </figure>
      <div className="container">
        <p className="text">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod quaerat
          velit dicta neque maxime nulla, qui officia culpa itaque voluptatem
          libero quam architecto possimus ratione aliquam eveniet. Repellat,
          cumque ullam!
        </p>
        <p className="text">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod quaerat
          velit dicta neque maxime nulla, qui officia culpa itaque voluptatem
          libero quam architecto possimus ratione aliquam eveniet. Repellat,
          cumque ullam!
        </p>
        <p className="text">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod quaerat
          velit dicta neque maxime nulla, qui officia culpa itaque voluptatem
          libero quam architecto possimus ratione aliquam eveniet. Repellat,
          cumque ullam!
        </p>
      </div>
    </div>

  <div className="grid">
      <figure className="figure">
        <img src={placeholder} alt="placeholder" className="img" />
      </figure>
      <div className="container">
        <p className="text">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod quaerat
          velit dicta neque maxime nulla, qui officia culpa itaque voluptatem
          libero quam architecto possimus ratione aliquam eveniet. Repellat,
          cumque ullam!
        </p>
        <p className="text">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod quaerat
          velit dicta neque maxime nulla, qui officia culpa itaque voluptatem
          libero quam architecto possimus ratione aliquam eveniet. Repellat,
          cumque ullam!
        </p>
        <p className="text">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod quaerat
          velit dicta neque maxime nulla, qui officia culpa itaque voluptatem
          libero quam architecto possimus ratione aliquam eveniet. Repellat,
          cumque ullam!
        </p>
      </div>
    </div>

CSS code

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.grid {
  width: 100%;
  display: grid;
  grid-template-columns: 35% 1fr;
}

.figure {
  width: 100%;
  height: 100%;
}

.img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.container {
  border: 1px solid blue;
}
.text {
  padding: 30px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.grid {
  width: 100%;
  display: grid;
  grid-template-columns: 35% 1fr;
}

.figure {
  width: 100%;
  height: 100%;
}

.img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.container {
  border: 1px solid blue;
}
.text {
  padding: 30px;
}

11 replies

KPCKevin Powell - Community

•Created by ŽoHo on 12/1/2022 in #front-end

Footer Semantics

Yes. You are right. I didnt understand p and span well. Thx

14 replies

KPCKevin Powell - Community

•Created by ŽoHo on 12/1/2022 in #front-end

Footer Semantics

I see. Thank you. That resolves my dilemma then.

14 replies

KPCKevin Powell - Community

•Created by ŽoHo on 12/1/2022 in #front-end

Footer Semantics

That was my reasoning of putting it there. There is no semantic meaning of that. For example copyright text that is found is there for legal purposes but doesnt contribute to page

14 replies

KPCKevin Powell - Community

•Created by ŽoHo on 12/1/2022 in #front-end

Footer Semantics

Im not saying to use span as a replacement of p and h. Im using p and h in my main element. Im talking of footer (of the page not section or article) only. As you said there is no point of placing heading in footer.

14 replies

KPCKevin Powell - Community

•Created by ŽoHo on 12/1/2022 in #front-end

Footer Semantics

Okay. How will it impact SEO if I use span for a line of text like copyright 2022 or designed developed by john doe instead of using p tags. Basically currently i use spans instead of p and h tags. For little text i have in footer. And ul/li for nav ofc.

14 replies

Gaming

Programming