I have created a container with the intention of two columns floating side by side. One column contains a picture of me cresting the water while scuba diving, and the other is all of the necessary input sections for a contact me box. Below I have a slideshow referencing the pictures stored in the repo exactly the same and it works.

Relevant section of index.html:

<!-- Contact Me-->
    <section >
        <div >
            <h2 >
                Have a project recommendation? A job opportunity? Contact me below!
            </h2>
        </div>
        <div  id="Contactme">
            <div >
                <div >
                    <img src="/assets/img/scuba.jpg" alt="Photo of me scuba diving taken by Ashley White">
                </div>
                <div >
                    <form action="/action_page.php">
                        <label for="fname">First Name</label>
                        <input type="text" id="fname" name="firstname" placeholder="Your name..">
                        <label for="lname">Last Name</label>
                        <input type="text" id="lname" name="lastname" placeholder="Your last name..">
                        <label for="fname">Company</label>
                        <input type="text" id="cname" name="companyname" placeholder="Your company's name..">
                        <label for="country">Region</label>
                        <select id="country" name="country">
                            <option value="africa">Africa</option>
                            <option value="asia">Asia</option>
                            <option value="aus">Australia</option>
                            <option value="eu">Europe</option>
                            <option value="mideast">Middle East</option>
                            <option value="namerica">North America</option>
                            <option value="samerica">South America</option>
                        </select>
                        <label for="subject">Subject</label>
                        <textarea id="subject" name="subject" placeholder="Write something.."
                            style="height:170px"></textarea>
                        <input type="submit" value="Submit">
                    </form>
                </div>
            </div>
        </div>
    </section>

Relevant section of styles.css

/* Style inputs */
input[type="text"],
select,
textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}

input[type="submit"]:hover {
  background-color: #45a049;
}

/* Style the container/contact section */
.contact-container {
  margin: auto;
  width: 60%;
  border-radius: 10px;
  background-color: #f2f2f2;
  padding: 10px;
}

.contact-column {
  float: left;
  width: 50%;
  margin-top: 6px;
  background: color #f2f2f2;
  padding: 10px;
}

.contact-row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .contact-column,
  input[type="submit"] {
    width: 100%;
    margin-top: 0;
  }
}

There seems to be a difference between running it locally via VSCode's debug and run vs the live version after I have pushed the changes to GitHub. I am hosting the website via GitHub pages on a custom domain (mattharten.com if it is relevant).

My suspicion is that I am limiting the available space within the container and the image I am trying to display there no longer fits. scuba.jpg is a 360 x 640 px .jpg file in the same /assets/img/ location as the other pictures used on the site. I am having no issues with the other images.

CodePudding user response：

Try using "assets/img/scuba.jpg" instead for your src. There shouldn't be a backslash preceding the first directory. If you replace the src of the image with "https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png", it shows up.

CodePudding user response：

I noticed that the GitHub repository for the project was showing "Scuba.jpg" rather than "scuba.jpg" and after checking the files within the actual folder, the image name was in fact lowercase. For whatever reason, it would not notice the change & update it in the repository.

To fix it, I renamed the file to be used, made a copy of scuba.jpg, renamed it contact-scuba.jpg, and referenced the new name in the file. Now it works pretty as can be

Now it works, I have no idea why it wouldn't detect the file name case change.

The final working version looks like this: