Making my Portfolio page suitable for a mobile device

Code Feedback
1

Hey guys, I’ve just finished my portfolio web page and it looks nice and neat on a 15.6" screen. However, when I try to load it on my smartphone, everything turns into an aesthetic chaos. My question is: is there any fast way to turn the whole page mobile-responsive? I have tried to encompass the whole code within a container-fluid div and it’s still the same chaos (I have tried at first to encompass all the elements within the body element, and then to encompass the body element as well, but neither way worked out).

Here’s my codepen:

2

The best thing you can do is inspect elements that are acing wonky and figure out the best way to fix it. Also make sure all your columns have rows and all your divs are closed properly.

1 Like
3

Sounds good, I’ll try it. Thanks for the advice!

4

Right now you’ve got a layout for ‘large’ size, but no alternative layouts for smaller size screens.

Where you have <div class="col-lg-7"> and <div class="col-lg-5"> for your two columns you could add classes to control responsive alternative layouts for different screen sizes. The different sizes are xs, sm, md, and lg (sorry if I’m telling you stuff you already knew. I may have misunderstood your question). xs=extra small (smartphone), sm=small (tablet), md=medium (small desktop/laptop screen and possibly landscape tablet), lg=large (big desktop screens).

So to accommodate smartphone layouts you would add col-xs-xx (xx being the number of Bootstrap grid columns wide you want that div to be on smartphones). You’d just add the different classes for the different widths you need.

For example with your current layout you could have…

<div class="col-xs-12 col-md-6 col-lg-7"> and <div class="col-xs-12 col-md-6 col-lg-5">

This would ensure for an extra small screen (portrait screen smartphone) the first div would fill all 12 Bootstrap grid columns and the second div would fill all 12 Bootstrap grid columns, positioning them one after the other.
For the medium layout (smaller desktop screens) the divs would be equal widths (6 Bootstrap grid columns each). For larger screens you’d still have your original layout.

There’s no way to fix it quickly, but fixing it thoroughly will ensure a great responsive website.

cheers,
Ali

2 Likes
5

Thanks a lot, that was really helpful. I didn’t know I could add more than one column class for a single div. :+1:

6

It’s a great trick, and very handy! I’m glad my feedback was of some help.

Cheers,
Ali