Responsive Personal Portfolio

Responsive Personal Portfolio
0.0 0

#1

Anybody here willing to help me make my portfolio responsive and just give me tips on the design?

Btw it’s still in the making.


#2

I can see from your pen that you included bootstrap in the settings, but you’re not using any of the bootstrap CSS classes. Is there a reason for that?

If you’re trying to make the page responsive without using bootstrap (or FlexBox), it can be extremely difficult. Is that what you’re trying to accomplish?

If you are willing to use Bootstrap, making the page responsive is much easier, take advantage of their responsive grid system which divides each section into twelve columns that grow/shrink based on the screen size.


#3

Yah, I’m working on the bootstrap right now. I had a couple of bootstrap classes in there, but not much. I thought bootstrap was just some easy shortcuts; I didn’t know it actually helped with the responsiveness. Thanks.


#4

Yeah the original concept behind bootstrap was mobile first design. The basic idea is this:

Imagine your page is split in half, with two columns. On medium devices (laptops upwards) you want the screen to be split two thirds on the left and one third on the right. On smaller screens (tablets and phones) you want it split in half. The below code will do that for you:

<div class="col-md-8 col-sm-6"><!-- Some Content here --></div>
<div class="col-md-4 col-sm-6"><!-- More Content here --> </div>

On a medium device, eight twelfths(or two thirds) of the screen will be occupied by the left side and four twelfths( or one third) will be occupied by the right side. On smaller screens, they will take up equal amounts. Its worth noting that this assumes that these two div’s are within a parent which takes up the full screen (e.g. inside the <body> tag. Using these columns will divide the parent into twelve columns, so you can keep dividing your screen space.

This is only a very quick intro to Bootstrap. I’d recommend reading through the official bootstrap documentation, its very well documented.


#5

Thanks so much for the info. Super helpful. I’m just watching a YouTube video on Bootstrap right now lol. :stuck_out_tongue: OMG I hate the tongue emoticons… lol