Unable to make my website mobile friendly

Hey guys, I’m trying to finish my second project: Personal Portfolio Webpage. I thought I completed it after seeing my laptop version. But when I open it in my smartphone, it does not look good at all. I tried going through the basics once again and left with no clue. Please help me out
https://codepen.io/Rookie_sai/full/bWyjzr/

Hello.

I took a look at your code and it looks like you are not taking advantage of some of the responsive features of Bootstrap.

For example, you could convert your navigation into a collapsible menu bar. Check out this link below for more information.

You can also experiment with the grid system to manage the look of your content on different devices.

Hope this provides some direction for you. Let me know if you have any other questions and I’ll try to help you out.

2 Likes

Hi,
I checked your page too, and jv88899 is right to check the documentation. I created pretty much all my website(not that many) with bootstrap so far. So like it was said, check the documentation for the collapsible menu bar.
You can also use multiple “col” like " col-sm-6 col-md-4" depending on how you want them to stack at those resolutions. And for things like font-size, padding etc you can look into @media queries since they are easy to understand and you will be using them in the future. You can also use nested grids for those buttons.
Hope that helps.

1 Like

When working with codepen you should be able to resize the results window. It will give you an idea of how your project will look on smaller screens.

1 Like

You can switch the code pen layout to have the code on the right hand side, then you can use the slider to make the screen smaller.

1 Like

Thanks everyone. I will try to redo my project with your advice :slight_smile:

I made navigation bar based on your suggestion. Here’s the link https://codepen.io/Rookie_sai/full/qmeBvg/
When I open the website on mobile, I can see the three bars but clicking on them doesn’t open anything. Kindly help me out!!!

CodePen doesn’t fully support bootstrap 4.0.0 at the moment (even if it is imported by default). I have spent a lot of time trying to make a functional navbar with bootstrap 4 but nothing worked. The best thing you can do is to switch to bootstrap 3.3.7. There are lots of examples and it works perfectly on CodePen.

Hey, awesome job implementing that nav bar! I looked at your project and it looks like you have forgotten something that I have forgotten many times when using Codepen :slight_smile:

In your JavaScript settings, make sure that you add a link to jQuery and a link to the Bootstrap JavaScript (in that order, jquery first, then Bootstrap JavaScript). I went on your page, added these two, clicked ‘Run’, and now your Menu works.

Again, nice job getting the navigation set up, it looks very nice. Once you add jQuery and Bootstrap it should work just fine.

Thanks a lot dude, that worked like a charm :slight_smile: One more thing, how do I shift my box(block) to the center of page i.e. give some padding between the block and the nav bar.(In my first page)…I have tried to change the paddings and margins and it didn’t help me

Are you talking about the block with your name and ‘learning, improving and evolving everyday’?

If so, that appears to be centered already but to give it some padding between the block and the nav bar, try adding padding-top: 25px (or whatever value you want) to the .page1 class in your CSS.

1 Like

Thank you. That helped :slight_smile:

Bootstrap 4.0.0 at the moment isn’t available, the latest is only 4.0.0-alpha.6. And many things maybe will be different in final 4.0.

1 Like