New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Home page content overflowing container on window resize #2518

Open
marcobeltempo opened this Issue Oct 5, 2017 · 11 comments

Comments

Projects
None yet
4 participants
@marcobeltempo
Contributor

marcobeltempo commented Oct 5, 2017

OS: Windows 10
Browser: Firefox 57, Google Chrome v61.0

Description

When you resize the browser on the home screen with a width less than 765 pixels, the "Welcome video" and footer begin to overflow the content-wrapper.

thimble_video_overflow_capture

thimble_footer_overflow_capture

Steps to reproduce

  1. Go to home page Thimble by Mozilla
  2. Resize window with a width less than 765px

thimble_home_resize_overflow_capture

@humphd humphd added the UI label Oct 5, 2017

@humphd

This comment has been minimized.

Show comment
Hide comment
@humphd

humphd Oct 5, 2017

Member

@flukeout thoughts? Perhaps @marcobeltempo can also fix this.

Thanks for filing this!

Member

humphd commented Oct 5, 2017

@flukeout thoughts? Perhaps @marcobeltempo can also fix this.

Thanks for filing this!

@marcobeltempo

This comment has been minimized.

Show comment
Hide comment
@marcobeltempo

marcobeltempo Oct 5, 2017

Contributor

@humphd that would be great if I could work on this as well.

Contributor

marcobeltempo commented Oct 5, 2017

@humphd that would be great if I could work on this as well.

@gideonthomas

This comment has been minimized.

Show comment
Hide comment
@gideonthomas

gideonthomas Oct 5, 2017

Member

@flukeout based on your that screenshot, the content wrapper is cropped, wouldn't fixing that fix this issue as well?

Member

gideonthomas commented Oct 5, 2017

@flukeout based on your that screenshot, the content wrapper is cropped, wouldn't fixing that fix this issue as well?

@flukeout

This comment has been minimized.

Show comment
Hide comment
@flukeout

flukeout Oct 5, 2017

Contributor

I'll check things out and report back within the hour.

Contributor

flukeout commented Oct 5, 2017

I'll check things out and report back within the hour.

@flukeout

This comment has been minimized.

Show comment
Hide comment
@flukeout

flukeout Oct 5, 2017

Contributor

@marcobeltempo If you want to tackle this, please do! I welcome any and all changes that improve the layout of the site when the window gets narrower.

A simple fix would just be to make sure we don't have the weird empty white area on the right that you can scroll to. A few of the elements on the page seem to have minimum widths, but the main site wrapper (or maybe the body tag) don't. I bet we could slap a minimum width on the body to fix this. It wouldn't be great - but would be less broken.

A fancier fix would make it so that the homepage gracefully adapts to a narrower viewport. If we do this, we'd also want to tackle the other pages, so it's a bit more work. We could have the main normal layout, and then if the viewport shrinks to less than 1024 px or whatever, we just apply a new stylesheet that is for mobile devices.

I think a simple fix would be good for now.

Contributor

flukeout commented Oct 5, 2017

@marcobeltempo If you want to tackle this, please do! I welcome any and all changes that improve the layout of the site when the window gets narrower.

A simple fix would just be to make sure we don't have the weird empty white area on the right that you can scroll to. A few of the elements on the page seem to have minimum widths, but the main site wrapper (or maybe the body tag) don't. I bet we could slap a minimum width on the body to fix this. It wouldn't be great - but would be less broken.

A fancier fix would make it so that the homepage gracefully adapts to a narrower viewport. If we do this, we'd also want to tackle the other pages, so it's a bit more work. We could have the main normal layout, and then if the viewport shrinks to less than 1024 px or whatever, we just apply a new stylesheet that is for mobile devices.

I think a simple fix would be good for now.

@marcobeltempo

This comment has been minimized.

Show comment
Hide comment
@marcobeltempo

marcobeltempo Oct 5, 2017

Contributor

@flukeout I would love to tackle this one! I’ll work on a simple fix and experiment with some other options in the future.

Contributor

marcobeltempo commented Oct 5, 2017

@flukeout I would love to tackle this one! I’ll work on a simple fix and experiment with some other options in the future.

@flukeout

This comment has been minimized.

Show comment
Hide comment
@flukeout

flukeout Oct 5, 2017

Contributor

Great, it's yours

Contributor

flukeout commented Oct 5, 2017

Great, it's yours

@marcobeltempo

This comment has been minimized.

Show comment
Hide comment
@marcobeltempo

marcobeltempo Oct 15, 2017

Contributor

@flukeout I followed your suggestion by adding min-width:981px to the body tag. There's still a horizontal scroll but it seems to solve the overflow issue.

thimble_issue2518_capture

I was reading up on the CSS Grid Layout and thought it might be an option for implementing a responsive design.

Contributor

marcobeltempo commented Oct 15, 2017

@flukeout I followed your suggestion by adding min-width:981px to the body tag. There's still a horizontal scroll but it seems to solve the overflow issue.

thimble_issue2518_capture

I was reading up on the CSS Grid Layout and thought it might be an option for implementing a responsive design.

@gideonthomas

This comment has been minimized.

Show comment
Hide comment
@gideonthomas

gideonthomas Oct 19, 2017

Member

@marcobeltempo, CSS Grids are great but unfortunately it has terrible browser support at the moment.

Member

gideonthomas commented Oct 19, 2017

@marcobeltempo, CSS Grids are great but unfortunately it has terrible browser support at the moment.

@marcobeltempo

This comment has been minimized.

Show comment
Hide comment
@marcobeltempo

marcobeltempo Oct 19, 2017

Contributor

@gideonthomas ahhh I wasn't aware of that.
Also I was hoping to get your opinion on applying a simple fix of adding a min-width to the body tag

Contributor

marcobeltempo commented Oct 19, 2017

@gideonthomas ahhh I wasn't aware of that.
Also I was hoping to get your opinion on applying a simple fix of adding a min-width to the body tag

@flukeout

This comment has been minimized.

Show comment
Hide comment
@flukeout

flukeout Oct 19, 2017

Contributor

Hey @marcobeltempo - I think the min-width fix is a great improvement. Can you open a PR with it so we can take a look? Then, we can follow up with a responsive design in a subsequent pass and choose an approach that we all like.

Contributor

flukeout commented Oct 19, 2017

Hey @marcobeltempo - I think the min-width fix is a great improvement. Can you open a PR with it so we can take a look? Then, we can follow up with a responsive design in a subsequent pass and choose an approach that we all like.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment