My site is distorted after deploy

Not sure why my site looks different after i’ve deployed it.
my contact me form is off center as apposed to how it’s supposed to look.

And this is that same section after deploy


https://tamaraandrea-portfolio.netlify.app/

Not sure what the issue is, I’ve deployed multiple times, with no luck. The size of the site is even larger, and i have to adjust my setting on my computer so it’s smaller. If there is a solution to this issue it would be greatly appreciated :slight_smile:

Hey @TamaraAndrea

The issue with the contact form is to do with the margin-left and margin-right values as when I removed these, it became centered. Generally speaking, when I have something to center, I might use margin: 0 auto;.

What do you mean by larger? The text size, the various elements (or specific elements)? Can you provide a screenshot of how it is meant to look?

Here is my code for this section. Also I mean the text and images are bigger than normal.

import React, { useState, useRef } from "react";
import emailjs from "emailjs-com";
import { init } from "@emailjs/browser";

import "./contact.css";
init("wcnCiEjf9yoZnUt0e");
export default function Contact() {
  const [name, setname] = useState("");

  const [email, setemail] = useState("");
  const form = useRef();
  const [message, setmessage] = useState("");
  const sendEmail = (e) => {
    e.preventDefault();
    // console.log(e);
    console.log(form.current);

    const templateparams = {
      from_name: name + " " + email,
      to_name: "tamaraandreawilburn@gmail.com",
      feedback: message,
    };
    emailjs.send("service_e0zkrad", "template_7qrzf2e", templateparams).then(
      function (response) {
        console.log("SUCCESS!", response.status, response.text);
      },
      function (error) {
        console.log("FAILED...", error);
      }
    );
  };

  return (
    <>
      <div>
        <div className="contact-me-card row">
          <div className="col-lg-6 col-md-5 col-sm-12 left-contact px-2 py-2">
            <span className="get-in-touch mx-4 my-5">Get in touch </span>

            <div className="py-5 d-flex justify-content-center">
              <lottie-player
                src="https://assets3.lottiefiles.com/packages/lf20_u25cckyh.json"
                background="transparent"
                speed="1"
                style={{ width: "300px" }}
                loop
                autoplay
              ></lottie-player>
            </div>
          </div>

          <div className="col-lg-6 col-md-5 col-sm-12 my-auto">
            <form
              ref={form}
              className="d-flex flex-column card-contact-right"
              onSubmit={sendEmail}
            >
              <div className="input-group my-3 d-flex flex-column">
                <label> Name </label>
                <input
                  value={name}
                  onChange={(e) => {
                    setname(e.target.value);
                  }}
                  type="text"
                  placeholder="enter your name"
                  className="input-groups"
                />
              </div>
              <div className="input-group my-3 d-flex flex-column">
                <label>Email </label>
                <input
                  value={email}
                  onChange={(e) => {
                    setemail(e.target.value);
                  }}
                  type="text"
                  placeholder="enter your Email"
                  className="input-groups"
                />
              </div>
              <div className="input-group my-3 d-flex flex-column">
                <label> Message </label>
                <textarea
                  value={message}
                  onChange={(e) => {
                    setmessage(e.target.value);
                  }}
                  type="text"
                  placeholder="enter your message"
                  className="input-groups"
                />
              </div>
              <div className="input-group my-3 d-flex flex-column">
                <input
                  className="btn btn-success"
                  type="submit"
                  value="Send Message"
                />{" "}
              </div>
            </form>
          </div>
        </div>
      </div>
    </>
  );
}

.contact-me-card {
  background: #1c1c1c;
  width: 80%;
  box-shadow: 10px 10px 63px 4px rgb(243 240 240);
  /* height: 500px; */
  margin-inline: auto;
}
.get-in-touch {
  color: #fff;
  font-family: "Ubuntu";
  font-weight: 700;
  font-size: 2rem;
}
.input-groups {
  border: none;
  border-radius: 10px;
  padding: 10px 10px;
}
.card-contact-rihgt {
  background: rgb(0, 7, 61);
  box-shadow: 10px 3px 33px 4px rgb(243 240 240);
  border-radius: 20px;
  width: 60%;
  padding: 24px;
}

Hi @TamaraAndrea,

As @coelmay suggested, would you be able to share a screenshot of “how it’s supposed to look”?

Sure I will have to make multiple posts…

Okay this is it. This is from my local host. Also i ended up using heroku to deploy as well and it turned out fine, but it’s so slow i’d rather use this platform, also for future projects.

Hey there, @TamaraAndrea :wave:

Thanks for your patience here! I have looped in members of the Support Team in order to look into this further for you. In the interim, can you please share what additional debugging steps you have taken? Thanks so much.

I’ve tried changing the margin in the css file, but the position of the form stays the same

Can you share the git repository you are deploying from @TamaraAndrea ?

Hey @TamaraAndrea,

I think you’re making changes, but the site is actually failing to build:

https://app.netlify.com/sites/tamaraandrea-portfolio/deploys/625f3afdeeacba00098ba7b6#L71

You need to change your build command to CI= npm run build.