MyPortfolio help needed

1

I need help with my porfolio project. Any help or suggestions is appreciated. I’ve searched online but it seems like I keep running into dead ends

Issues I’m having:
-I made a container for My Projects and put in 6 images with captions. It goes down the page but i would rather it be in either two rows of 3 or 3 rows of two. I can’t seem to get the syntax right.

-When I press one of the nav buttons it takes me to one of the sections but it cuts off some of the text or element.

-When i load the page it seems to load slow on desktop and mobile. I think it may have to do with background image or something.

-When I load the page on mobile it doesn’t keep the navbar fixed at the top like it does on desktop

-Also on mobile the webpage doesn’t seem to fit the screen properly and I’ve had it crash a few times.

Like I said any help or suggestions would be appreciated.

Here’s the link: https://codepen.io/dantedark1/pen/KabPNJ

2

  1. for the my projects sections you can easily solve that problem with some flex box, here is a link about css layout http://learnlayout.com/ , in it there is a part about flex box which will be of great help, after you read the first link check this one out too , https://css-tricks.com/snippets/css/a-guide-to-flexbox/

  2. Your navabar is overlapping the section, you can fix that by adding some margins on top

  3. yes your background image is heavy, idk how you can fix that , the problem is usualy codepen , if you deploy the site on surge and have the image inside your file directories that wont affect so much, but again it would be bbest to try to comprise the image but i know very little about that, i have oonly read it in some places

  4. that a problem of bootstrraps class you might wanna google that

  5. Hm well that is a matter of responsiveness a good way is for you to make the responsiveness layout yourself instead of using bootstrap for everything , try the css @query , and also use view width(vw) and view height(vh) properties for scaling

again you will have less of a hassle if you learn some css layouts from the above links

3

-I made a container for My Projects and put in 6 images with captions. It goes down the page but i would rather it be in either two rows of 3 or 3 rows of two. I can’t seem to get the syntax right.

Look at the bootstrap documentation on grid system.

-When i load the page it seems to load slow on desktop and mobile. I think it may have to do with background image or something.

Press F12 in your browser to pull up browser tools. Click on the network tab. Reload the page. Now you should see load time for all assets(images, js, css, etc) on your page. See how large and how much time it takes for your image to load. Here is a youtube explaining network tab in more depth.

4

You are correct that the syntax is not correct. Here is what you have:

<div class "container col-xs-12 text-center" id="container3">
  <div class="col-xs-3">...
  <div class="col-xs-3">...
  <div class="col-xs-3">...

  <div class="row col-xs-12">
    <div class="col-xs-3">...
    <div class="col-xs-3">...
    <div class="col-xs-3">...
  </div>

</div>

The proper syntax would look like this:

<div class "container text-center" id="container3">
  <div class="row">
    <div class="col-xs-4">...
    <div class="col-xs-4">...
    <div class="col-xs-4">...
  </div>

  <div class="row">
    <div class="col-xs-4">...
    <div class="col-xs-4">...
    <div class="col-xs-4">...
  </div>

</div>

Columns (.col-xs-whatever) must be nested in a row like shown above. Rows must be nested in a container or container-fluid, which you have. You should not put .col-xs-12 on a row or a container. .col-xs-12 is to make a vertical column take up full width of a row. Containers and rows are horizontal and have full width already. Because there are 12 vertical columns in a row, you need to match it up to be divisible by 12. For example, you want 2 rows of 3? You will want column size 4. You want 3 rows of 2? You will want 3 rows and a column size of 2.

I am not sure that’s the problem. It looks to me like he does have margins, but the issue seems to be with the body. Not sure, still looking at this one…

Try using a smaller seamless background image and repeating it (ex: 50x50). The size of the picture you have is 4500x3000… that’s absolutely HUGE to be delivered every time. The biggest resolution you should have for desktop is 1920x1080. If you host it somewhere like Cloudinary, it will be delivered faster too.

Several times you are using pixel based height and widths. If you set your page to be 600px wide, what happens when your device is only 550 pixels wide?

5

Hi,

Nowadays, with the wide range of viewports you should rather relative measure units like em, % and so on, helps scale from viewport to view port.
For your pictures you may want to thing mobile first and have different version of your image loaded using media queries (starts from the smallest resolution/picture by defults for mobile and then add media queries for higher view port.)

Another thing to help you:
Try the mobile speed test tool from Google
https://testmysite.thinkwithgoogle.com/

This should help you figure out accurately where you are standing on mobile loading time

Hope it helps :wink:

6

I’ve made some adjustments but it didn’t fix the column and rows. Also, on mobile not only is the navbar not staying at the top the buttons don’t work for me.

7

Yeah, I realized that’s what i was doing wrong on some parts

8

Also, I’m still having trouble getting the padding to work for the navbar where it cuts off content. I put in padding-top:60px; and even margin-top:60px; in the body element like i’ve read online and neither seem to work. Btw i have bootstrap v4. i’m not sure if that would affect it. I

9