how to build responsive blogs card

Sure, here's a description for the project section:

import React from 'react';
import './project.css';

export const Project = () => {
  return (
    <section>
      <div className="projects container">
        <h2 className="section-title">Projects</h2>
        <article className="project">
          <div className="project__img-container">
            <img className="project__img" src='https://images.unsplash.com/photo-1544474560-5b2a788d024a?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODI3NjU2OTU&ixlib=rb-4.0.3&q=80&w=800' alt=''/>
          </div>
          <div className="project__content grid-flow">
            <h3 className="project__title">E Commerce Website</h3>
            <div className="project_description">
              <ul className="project__tags flex-group" role="list">
                <li className="project__tag">NextJS</li>
                <li className="project__tag">TypeScript</li>
              </ul>
              <p>
                Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eligendi reprehenderit ipsa officia dolore recusandae cumque tenetur, cupiditate est? Suscipit voluptatibus nihil, nam quisquam illo architecto laudantium perspiciatis ipsa nesciunt!
              </p>
              <a className="project__cta" href="exmaple.com" target="_blank" rel="noopener noreferrer">Read more..</a>
            </div>
          </div>
        </article>
        {/* Additional articles for other projects */}
      </div>
    </section>
  );
};

This component represents a project section on a website. It displays a list of projects with their respective images, titles, descriptions, and tags.

Each project is represented by an article element with the class project.
Within each article, there is a container for the project image (project__img-container) and the project content (project__content).
The project image is displayed using an img element with the class project__img.
The project content includes the project title (project__title), tags (project__tags), description (project_description), and a call-to-action link (project__cta).
Tags are displayed as a list (ul) with each tag represented by an li element with the class project__tag.
The call-to-action link (project__cta) leads to more details about the project. This component can be reused to display multiple projects with different details.

To make the project section responsive, we can use CSS media queries to adjust the layout based on the screen size. Below is the modified CSS code to make the project section responsive:

.project__img {
    width: 20rem;
    height: 15rem;
}

.project {
    display: flex;
    flex-direction: row;
    border: 1px solid #ccc;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 20px;
    height: auto;
  }
  .project__content {
    padding: 20px;
  }
  .project_title {
    font-size: 1.5rem;
    margin-bottom: 10px;
  }

  .project_description {
    font-size: 1rem;
    margin-bottom: 20px;
  }
  .project__cta {
    background-color: #181819;
    color: #fff;
    padding: 8px 10px;
    text-decoration: none;
    border-radius: 4px;
    display: inline-block;
    margin-top: 8px;
  }
  .project__cta:hover {
    background-color: #616263;
  }
  .project__tags {
    display: flex;
    flex-direction: row;
    gap: 1.5rem;
    font-size: var( --normal-font-size);
    font-weight: var(--font-medium);
  }
  @media screen and (max-width: 992px) {
    .project_title {
        font-size: 1rem;

      }
      .project__content {
        padding: 10px;
      }
      .project_description {
        font-size: var(--normal-font-size);
        margin-bottom: 10px;
      }
      .project__tags {
        gap: 1rem;
        font-size: var(--small-font-size);
        font-weight: var(--font-medium);
      }

  }
  @media screen and (max-width: 768px) {
    .project {
        flex-direction: column;
        height: auto;
      }
      .project__img {
        width: 100%;
        height: 20rem;
    }

  }
  @media  screen and (max-width: 412px) {
    .project__img {
        width: 100%;
        height: 15rem;
    }
  }

This CSS will ensure that the project section adapts its layout appropriately for different screen sizes, providing a better user experience across devices.

github
website

Array methods in react.js
Fragment in react.js
Conditional rendering in react.js
Children component in react.js
use of Async/Await in react.js
Array methods in react.js
JSX in react.js
Event Handling in react.js
Arrow function in react.js
Virtual DOM in react.js
React map() in react.js
How to create dark mode in react.js
How to use of Props in react.js
Class component and Functional component
How to use of Router in react.js
All React hooks explain
CSS box model
How to make portfolio nav-bar in react.js

Blog

how to build responsive blogs card

Anil

Join Our Newsletter. No Spam, Only the good stuff.

Related