I’m currently using a slider on a page, each slide has a background image (cover 50%/50%) and then I position text over those background images. The problem I am having is that, based upon the device width, the text in the slide pushes down the background image or doesn’t such that you get the default slide background color showing up like this for some slides:
While I am able to adjust things for the 4 preset device types in the webflow interface so this doesn’t happen, I can’t control it for every width, resulting in the issue above. Is there a responsive design technique that I am not employing that can fix this issue, or some other approach that can fix this issue?
@dbock what page is this slider on? I had a look through your site and only found one on the homepage. That one works well, it resizes with the screen. I couldn’t find the one you took this screenshot off.
@sarahfrison, thank you for taking a look. I actually spent some time working on this issue yesterday and realized that the “right” way to do responsive design with sliders (and probably background images in general) is to set a height on the slide with the background image that is consistent across all slides (and may change for each view breakpoint, again consistently). Using this approach, along with changing the text/buttons on the slide to be contained in a flex box resolved all my issues.
