Free Code Camp Portfolio: Unlocked | Tiffany R. White Blog

Free Code Camp Portfolio: Unlocked

Reading time: 2 mins

JPEG image-573A94AF296B-1So I started the portfolio project on March 10th and finished it today. I had help from the Gitter chat but not as much as last time.

I took the example code and re-engineered it to fit what I wanted to do. I added an unordered list, a cover photo, a mailto: link and a few other things.

The thing I struggled with the most was horizontal scrolling on mobile with Bootstrap. When looking at the Pen on mobile, you had some overflow, which totally defeats the purpose of a responsive design! So I went to Google and found a few Stack Overflow articles and found the right media query along with some other css that I edited to fit my project. I used:

@media screen and (max-width: 767px) {
  body {
  overflow-x: hidden !important;
}
.container {
   max-width: 100% !important;
   overflow-x: hidden !important;
   margin-left: auto;
   margin-right: auto;
   padding-left: 0px;
   padding-right: 0px;
   }
}

This allowed me to negated the overflow on the x axis part of the page which is horizontal. You essentially hide the overflow. But that wasn’t enough. Adjusting the margins and padding really made the responsiveness on my iPhone so much better.

You can find the Pen below.

JPEG image-573A94AF296B-1So I started the portfolio project on March 10th and finished it today. I had help from the Gitter chat but not as much as last time.

I took the example code and re-engineered it to fit what I wanted to do. I added an unordered list, a cover photo, a mailto: link and a few other things.

The thing I struggled with the most was horizontal scrolling on mobile with Bootstrap. When looking at the Pen on mobile, you had some overflow, which totally defeats the purpose of a responsive design! So I went to Google and found a few Stack Overflow articles and found the right media query along with some other css that I edited to fit my project. I used:

@media screen and (max-width: 767px) {
  body {
  overflow-x: hidden !important;
}
.container {
   max-width: 100% !important;
   overflow-x: hidden !important;
   margin-left: auto;
   margin-right: auto;
   padding-left: 0px;
   padding-right: 0px;
   }
}

This allowed me to negated the overflow on the x axis part of the page which is horizontal. You essentially hide the overflow. But that wasn’t enough. Adjusting the margins and padding really made the responsiveness on my iPhone so much better.

You can find the Pen below.

http://codepen.io/twhite96/pen/GZJRJz


Share

No Ads. No Sponsored Content. Ever.

I've decided that I no longer want to have sponsored posts on this blog. I also, though as tempting as it may sound, don't want ads; even if I got big enough for Carbon ads I don't want them. I want to post free, engaging content for beginning/junior devs. This means that I won't have Setapp posts or affiliates on this blog, though I will keep them on the Uses page. If you enjoy the content, buy me a coffee. Just click the button below.


Coffee Buy me a coffeeBuy me a coffee


Webmentions 0

No webmentions were found.

Newsletter