Trying to create a smooth transition between desktop and tablet view

[billwesterman]

Hi folks, a question for you about behavior when resizing browser windows.

We want our website to seamlessly resize as the user shrinks their browser window down from full-size through the tablet and mobile breakpoints. For an example of the behavior, see what happens to the hero image when resizing www.swiss.com - despite going through multiple breakpoints, it appears to smoothly resize the entire time.

I have recreated the hero resizing effect through the use of a fixed-width image at full size, switching to 100% width for the image once we reach the tablet breakpoint. This part is working well:
http://cwc-test30092948.webflow.io/
https://preview.webflow.com/preview/cwc-test30092948?preview=b2ad570d98d8dec42d657af8a8af0511

However, I’m having some difficulty with the content further down the page not resizing as we would like. Take for instance the red, green, and blue columns - when the browser is at full-size, mobile landscape, and mobile portrait, they display as intended. However, when at the tablet breakpoint, they instead display with vertical “rails” on the left and the right sides.

Question: How can I get the tablet view to display the content at 100% width, despite it being inside of a container that’s 960 px wide?

Thanks much, - Bill

[cyberdave (Dave S.)]

Hi @billwesterman, are you still having an issue with this? I was looking at the published site, but I cannot see any “rails” you mention. Could you take a screenshot of that and post for us to view? Cheers,
Dave

[billwesterman]

Sure thing. Here’s a screenshot, after I resized the browser window into the first breakpoint region (Tablet). The “rails” are the blue bars to the left and right of the lower section. Thanks!