Greetings from a budding web developer seeking guidance...
I've been grappling with positioning the image of a dog inside an iPhone frame at the center when the screen size is reduced (small to medium sizes) to enhance its appearance. Despite my efforts, the image seems to be leaning towards the left side instead of being perfectly centered on smaller screens.
Is there any solution or suggestion to rectify this issue? Any help would be highly appreciated.
The current code snippet I'm working with:
<!-- Title -->
<section id="title" class="gradient-background">
<div class="container col-xxl-8 px-4 py-0">
<div class="row flex-lg-row-reverse align-items-center g-1 py-0 pt-5">
... (omitted for brevity)
</div>
</div>
</section>
<!-- Features -->
<section id="features">
<div class="row g-4 py-5 row-cols-1 row-cols-lg-3">
... (omitted for brevity)
</div>
The CSS code used for styling (which doesn't seem to impact the issue but shared for reference):
.gradient-background {
background: linear-gradient(300deg, #00bfff, #ff4c68, #ef8172);
background-size: 180% 180%;
animation: gradient-animation 18s ease infinite;
}
@keyframes gradient-animation {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
I have tried various Bootstrap classes like mx-auto and text-center, among others, but haven't found a successful resolution yet... Hopefully, someone can offer some insight into this matter.