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

Development Tools

Muhammad Haris Khan
Muhammad Haris Khan
8,587 Points
Posted by Muhammad Haris Khan
Muhammad Haris Khan
8,587 Points

Made an online resume, still working on it, but the mobile version is not working

Thansks to skills and cofidence from Treehouse i started with this journey. Made online resume : www.hirehariskhan.eu.

The problem is that when i minimize my browse window on laptop to mobile screen resolution, the result is different in mobile screen than laptopscreen, , can anyone help and give me more feedback on how to improve?

Thanks

1 Answer

Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

You can make the flex items wrap on to another line by setting their flex-basis property to 100% using media queries.

e.g.

@media screen and (max-width: 768px) {
  #skills {
    flex-basis: 100%;
  }
}

Note that this rule would have to come after the original #skills rule to have effect, due to cascading.

You might even want to move the media queries to the end of your stylesheet, or swap them so that the 'mobile' rules are first, without a media query, and then the 'desktop/laptop' rules come after, within a min-width media query.

And lastly, if you're looking into the flexbox layout, check out this fantastic article from CSS Tricks: A Complete Guide to Flexbox

Hope that helps!