Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Jennifer Lee
Jennifer Lee
8,136 Points

Flexbox - Items "Stacked" In Footer, Despite Being Column with No Wrap (iOS isolated) - Solved

My site is at http://jennifer-lee.me/site/

Basically I am working with the footer

  • When I view it as it is on mobile devices, the footer background colour splits up (viewing on iPhone in Safari and Chrome) - the background colour shrinks to the size of the menu div, and the size of the email signup div, leaving the copyright div with a white background. The other two are uneven in size and display as stacked.

https://www.dropbox.com/s/9ga0ux0xa8yxsve/image1%201.PNG?dl=0

The issue seems isolated in iOS Safari and Chrome, despite caniuse.com saying that it is fully supported (iOS 8 requires -webkit-, which I do not have, and may eventually add, but at this time I am testing on devices using iOS 9)

I am having some troubles figuring this out. I would appreciate any help. Thanks Jennifer

Solved: I just had to remove body as a flex container.

2 Answers

rydavim
rydavim
18,814 Points

You're likely looking for the flex-basis property to solve problem number one.

.email-signup,
.footer-copyright-div {
  flex-basis: 50%; 
}

As for alignment, you'll want to make a couple of changes. You may want to add some padding or margins, as this ends up looking a bit tight.

#mc_embed_signup {
  /* margin: auto; -- this will try to center it within the flexbox, remove it. */
}

.footer-copyright {
  display: block; 
  text-align: right; 
}

You'll probably want to tweak or remove some of these styles in your media queries, as those two elements will not fit side-by-side on a small screen. Maybe consider centering them and putting flex-basis to 100%.

Unfortunately, I can't help you with your third issue as I am not experiencing that behavior.

Hopefully that helps get you on the right track, but let me know if you have any questions. Happy coding!

Jennifer Lee
Jennifer Lee
8,136 Points

Thank you for your reply. I played with your suggestions and then decided to set all the flex items to a column layout so that they stack on top of each other in rows and do not wrap.

I am still having problems with my footer though, on mobile it displays all jumbled up and the full teal background does not display properly. It makes little teal boxes for each content, so the teal background is only the size of each box. Also each item is stacked on top of each other even though they should be displayed as rows.

Jennifer Lee
Jennifer Lee
8,136 Points
Jennifer Lee
Jennifer Lee
8,136 Points

This is how they are being displayed on mobile, where it is not displaying properly: https://www.dropbox.com/s/9ga0ux0xa8yxsve/image1%201.PNG?dl=0