Streaming live at 10am (PST)

Trying to create a smooth transition between desktop and tablet view

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

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

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!

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.