Scaling differences at smallest breakpoints

[TIrvine]

Hi,

In one bar, I have an image placed and positioned at the “bottom.” In the bar below it, I have the lower portion of the image and positioned at the “top.” In theory, these should scale responsively together… but once I get down to the 2 smallest breakpoints, one image is scaling faster than the other and the image no longer lines up. I’ve tried for multiple hours to figure this out - but I’m stuck. I’m hoping there is an easy fix to this - something I’m hopefully just overlooking…?

Staging site (pass: “temporary”):

Sarnia and Area Homes and Properties for Sale - Ben Goetz Realtor

Here’s a screenshot to show how the two images aren’t syncing only in the narrowest browser sizes. I really appreciate any insight with this Thank you so much!

[ruenel]

Hello Tina,

Thanks for writing in! Yes, you both set the background image size to cover. As soon as the browser size gets narrower, the 2 Bar element will no have different height and this is the reason why the two images no longer in sync. I would suggest that you reconstruct your elements by using only 1 Bar element so that you will only have 1 single background image. Because with only have 1 background image, there is no need for synching and you will have much control over the background image.

Hope this makes sense.

[TIrvine]

That was my backup plan Ok, thank you so much for your thoughts on this.

[prakash_s]

You are most welcome, Tina.