Greetings! I am currently working on enhancing the responsiveness of my webpage using Media Queries. However, I seem to be facing a challenge with the second image not changing as expected when I reduce the browser size.
In the HTML, 'top-background-image' is defined as the background image for a specific div, while 'profile-pic' is a standalone photo on top of that background. Despite making adjustments to 'profile-pic' within the media query, I am unable to see any changes reflected in the output when the browser size is decreased.
Additionally, I am encountering an issue where the text alignment for 'baker' and 'joe' is off-center even though I have specified 'text-align: center'. This occurs when the browser size is decreased.
Seeking assistance on resolving these issues! :)
Here is the relevant HTML code snippet:
<div >
<div >
<img className="top-background-image" src="**image1.jpg**" alt="background-image"/>
</div>
<div className = "top-container">
<h1 className = "joe animate__animated animate__fadeInLeftBig ">Hi, I'm Joe.</h1><span><h2 className="baker animate__animated animate__fadeInRightBig animate__delay-1s" >a baker for you.</h2></span>
<img className ="profile-pic animate__animated animate__fadeInUpBig animate__delay-2s"src="**image2**.jpg" alt="profile"/>
<a className = "scroll" href="#middle-container"><FontAwesomeIcon className="social-icon" icon={faAngleDoubleDown} bounce size = '2x' color = "white"/></a>
</div>
</div>
Here is the corresponding CSS code:
.top-background-image {
position: relative;
filter: blur(4px);
-webkit-filter: blur(4px);
width: 1600px;
height: 800px;
margin-bottom: 10px;
}
.top-container {
display: flex;
justify-content: center;
text-align: center;
}
.joe {
font-family: "Droid+Sans";
font-weight: normal;
color: #ffffff ;
font-size: 7rem;
position: absolute;
top: 17%;
left: 32%;
}
.baker {
font-family: 'Satisfy', cursive;
font-weight: normal;
color: #ffffff;
position: absolute;
top: 37%;
right: 21%;
}
.profile-pic {
display: inline-block;
height: auto;
width: 250px;
border-radius: 50%;
position: absolute;
top: 48%;
left: 43%;
margin: auto;
display: block;
}
And here is how it looks within the media query:
@media (max-width: 900px){
.top-background-image {
position: relative;
left: 50%;
transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
-webkit-transform: translate(-50%, 0);
width: 100%;
}
.joe {
font-size: 3.5rem;
margin: 0 auto;
text-align: center;
}
.baker {
text-align: center;
margin: 0 auto;
font-size: 1.5rem;
}
.profile-pic {
display: block;
margin: 0 auto;
width: 150px;
width: 150px;
}
}