Hey all! I have searched through this forum and Reddit and could use a little bit of help thinking through an issue with my Banner Image. Two images included below show the issue.
UPDATE - hacky solution
Hello anyone who comes across this in the future!
Here are two links to other threads on this topic. [1] [2].
My problem occurred with screens at 2500px. I first added an xxl option to my partials > hero.hbs.
<img src="{{img_url background size="s"}}" srcset="{{img_url background size="s"}} 300w,
{{img_url background size="m"}} 600w,
{{img_url background size="l"}} 1000w,
{{img_url background size="xl"}} 2000w,
{{img_url background size="xxl"}} 2500w"
sizes="(max-width: 800px) 400px,
(max-width: 1170px) 1170px,
(max-width: 2000px) 2000px,
2500px"
alt="Description of the image" />
I then added an injection to nudge the image down on xxl screens.
/* Media query for screen width 2500px or larger (XXL size) */
@media screen and (min-width: 2500px) {
.m-hero__picture img {
margin-top: 200px; /* Adjust as needed to move the image down */
}
}
It isn’t pretty, but it’s sufficient for the moment / Until I can get some better banner images taken. Good luck out there!
Problem
On “standard” sized screens/viewports (1600 × 767, and even on phones) my banner image appears as expected; however, on extra large screens (2560 × 1307), the banner gets moved up and results in ‘chopped off heads’. I am using the Liebling theme but I feel that this isn’t a problem relegated to that theme.
Here is an example of a “normal” screen (1600 × 767)
Here is an example of a “large” screen (2560 × 1307)
Related Posts/Info
I’m lost for the best way to resolve this issue and would greatly appreciate any tips or pointers for working around the problem. I believe a solution could involve altering the m-hero__picture; however, I also think the problem could be deeper and that I may be better served to just take new photos and replace the current banner images.
m-hero__picture img {
width: 100%;
height: 100%;
object-fit: cover;