Revamping my personal website (www.coltstreet.com) led me to explore media queries for displaying different background images. Testing on desktop and via Chrome tools showed positive results, but the real challenge arose when viewing the site on my actual phone.
Despite attempts like resizing the images, checking browsers like Chrome and Safari, and testing on other devices, the issue persisted. This hinted at a coding problem that needed fixing.
Below are snippets of my styles:
.showcase-button {
position: absolute;
right: 30px;
bottom: 30px;
}
.showcase:hover {
opacity: 0.7;
cursor: pointer;
}
.about-me-section {
background: url("/assets/about-me-bk.png");
/* Additional CSS properties */
}
/* Media queries and further CSS rules */
And here's a glimpse of my HTML structure:
<app-header></app-header>
<div #home name="home" class="h-screen home-section">
<!-- More HTML content -->
</div>