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 class="content-section bg-primary text-black">
<div class="container px-4 px-lg-5 text-center">
<h2 class="mb-4">
Have a project recommendation? A job opportunity? Contact me below!
</h2>
</div>
<div class="contact-container" id="Contactme">
<div class="contact-row">
<div class="contact-column">
<img src="/assets/img/scuba.jpg" alt="Photo of me scuba diving taken by Ashley White">
</div>
<div class="contact-column">
<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.