Question 262700 in CSS Question posted in
Some basic documentation can be found here.

Css – I am unable to centre a card while hosting my website on firebase hosting

When i use my website on localhost ,my card is in center position but when i deploy it on Firebase & it is in left position not in center ,code of card is below :

//Code of card in ReactJS
<div style={{margin:'auto'}} align='center' className="container5">
      {data.map((card, index) => (
        <div style={{margin:'auto'}} align='center'  className={`card`} data-state={activeSections[index]} key={card.id}>
          <div className="card-header">
            <div
              style={{
                backgroundImage: `url('${card.imageUrl}')`,
              }}
              className="card-cover"
            ></div>
            <h1 className="card-fullname">{card.name}</h1>
            <h2 className="card-jobtitle">{card.jobTitle}</h2>
          </div>
          <div className="card-main">
            <div
              className={`card-section ${activeSections[index] === '#about' ? 'is-active' : ''}`}
              id="about"
            >
              <div className="card-content">
                <div className="card-subtitle">Description</div>
                <div className="card-desc-container">
                  <p className="card-desc">
                    {card.about}
                  </p>
                </div>
              </div>
            </div>
            <div
              className={`card-section ${activeSections[index] === '#experience' ? 'is-active' : ''}`}
              id="experience"
            >
              <div className="card-content">
                <div className="card-subtitle">Tech Stack</div>
                <div className="card-tech-stack">
                  {card.techStackData.map((tech, techIndex) => (
                    <div
                      key={techIndex}
                      className={`card-tech-item ${activeSections[index] === '#experience' ? 'is-active' : ''}`}
                      onClick={() => handleButtonClick(index, '#experience')}
                    >
                      {tech}
                    </div>
                  ))}
                </div>
              </div>
            </div>
            <div
              className={`card-section ${activeSections[index] === '#contact' ? 'is-active' : ''}`}
              id="contact"
            >
              <div className="card-content">
                <div className="card-subtitle">CONTACT</div>
                <div className="card-contact-wrapper">
                  <div className="card-contact">
                    {card.liveLink && (
                      <a
                        href={card.liveLink}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="live-button"
                      >
                        Live
                      </a>
                    )}
                    {card.liveLink && card.githubLink && <span className="button-separator"></span>}
                    {card.githubLink && (
                      <a
                        href={card.githubLink}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="github-button"
                      >
                        Github
                      </a>
                    )}
                  </div>
                </div>
              </div>
            </div>
            <div className="card-buttons">
              <button
                onClick={() => handleButtonClick(index, '#about')}
                className={activeSections[index] === '#about' ? 'is-active' : ''}
                data-section="#about"
              >
                ABOUT
              </button>
              <button
                onClick={() => handleButtonClick(index, '#experience')}
                className={activeSections[index] === '#experience' ? 'is-active' : ''}
                data-section="#experience"
              >
                Tech Stack
              </button>
              <button
                onClick={() => handleButtonClick(index, '#contact')}
                className={activeSections[index] === '#contact' ? 'is-active' : ''}
                data-section="#contact"
              >
                Link
              </button>
            </div>
          </div>
        </div>
      ))}
    </div>



//CSS 
.card {
  width: 100%;
  max-width: 400px;
  height: auto;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  background: linear-gradient(to bottom, #ffffff 0%, #f0f4fd 100%);
  overflow: hidden; /* Add overflow hidden for rounded corners */
  transition: transform 0.3s, box-shadow 0.3s, opacity 0.3s;
}

Link of website is : https://upsys-7e1b2.web.app/portfolio

I have tried margin : ‘auto’ ,align=’center’ but nothing works on deployed website it is still in left position of div.You can see image position in deployed website

Tags:

2

Answers


  1. 0

    can you provide the link we can reproduce the issue and debug?

    Login or Signup to reply.
  2. 0

    I think the problem is with your container style, as it holds your card.

    try
    //ReactJS

         <div className="container5">
     {data.map((card, index) => (
     <div className={`card`} data-state={activeSections[index]} key= 
     {card.id}>
     {/* ...rest of the JSX code */}
     </div>
     ))}
     </div>

    //CSS

        .container5{
     display: flex;
     justify-content: center;
     align-items: center;
     height: 100vh; <--- adjustable 
     }

    Try that!
    You have to re-write that, I’m new to stack 😉

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search