I need help! problem with mobile responsive with my portfolio!

1

I am having troubles with my portfolio, I really need help! I have 3 problems.

  1. I used the thumbnails with a tag and when I resize the browser the images will overlap.
  2. The about, portfolio and contact will not align center when the mobile view.
  3. The words in p tag is not responsive when I resized to mobile view.

Please somebody help me!!
Thank you,

https://codepen.io/Kijimu7/pen/wqOvjJ

2

Hi.
Try to use col-xs-12" and “col-sm-6” for your thumbnails. And if you use CSS for styling the page you need @media queries for adaptive same objects to different viewport. For example:
at big screens you have CSS rule “padding: 150px 100px 200px 100px”, but on mobile phones every element will be padding 200 px from left side too. Think about 400px display.Then half of 400px device width will be empty place and full your content is unreadable.

Second issue is here. Now you redefine defaul Bootstrap CSS properties like float and display.

Third. For responive fonts use ’ em ’ or ’ % ’ or any other values which browser calculated automatically based on defauld browser font size (16px usually). Read more here

Best regards.

3

Thank you so much for your help Frank!!! You are my hero :wink: I used media queries and seems it get better finally! I still have problem with the navigation bar. I used .navbar to change remove side spaces of my navbar but only margin-left will work but not the margin-right. Do you have any suggestions?
Thanks again,

Kijimu7

4

Yes, if you want to cut a space of the right side of navigation like this

image
image1366×768 44 KB

Then just add to class .navbar CSS rules like this

margin-right: 100px;

But if you want that content move inside navigation use CSS rule padding
image
image1366×768 40.9 KB

Just keep in mind CSS Box Model.

5

You are awesome! I could fixed the problem, Thank you so much for your help :slight_smile:

6

Cool. Keep coding.
Let me know if u need help.
Best rigards

7