Hello, I could really use some help with a problem I'm facing. I am currently working on my personal portfolio website using react.js and bootstrap. I've integrated the react popupbox package, but I noticed that on small screens, my picture is not centered when the popup opens. Is there a way to adjust this using CSS?
This is the code snippet for declaring the popupbox:
const Portfolio = () => {
const openPopupboxFlappyBird = () => {
const content = (
<>
<img className="portfolio-image-popupbox" src= {flappyBird} alt="Flappy Bird" />
<p>Flappy Bird game written in C#</p>
<a className="hyper-link" onClick={() => window.open("https://github.com/zacikmareek/simpleFlappyBird", "_blank")}>Github link</a>
</>
)
PopupboxManager.open({ content })
}
const popupboxConfigFlappyBird = {
titleBar: {
enable: true,
text: "Flappy Bird"
},
fadeIn: true,
fadeInSpeed: 500
}
Here is how the image is added:
return (
<div className="portfolio-wrapper">
<div className="container">
<h1 className="text-lovercase text-center py-5">.portfolio()</h1>
<div className="image-box-wrapper row justify-content-center">
<div className="portfolio-image-box" onClick={openPopupboxFlappyBird}>
<img className="portfolio-image" src={flappyBird} alt="Flappy Bird" />
<div className="overflow"></div>
<FontAwesomeIcon className="portfolio-icon" icon={faSearchPlus} />
</div>
</div>
</div>
<PopupboxContainer {...popupboxConfigFlappyBird} />
</div>
)
Additionally, here is the relevant CSS styling being used:
.portfolio-image-popubox {
width: 45rem;
padding: 0 0.5rem;
}
.hyper-link {
cursor: pointer;
color: var(--secondary-dark);
}
.hyper-link:hover {
color: var(--primary-red);
}
@media(max-width: 768px) {
.portfolio-image-popubox {
width: 100%;
}
}
@media(max-height: 640px) {
.popupbox-wrapper {
height: 100%;
}
.portfolio-image-popubox {
width: 80%;
}
}
You can see how it currently looks here. Do you have any suggestions on how to make the entire image fit on the screen?
Thank you for your assistance.