Not so proficient with boostrap grid. Trying to get section responsive to mobile. Help?

Code Feedback
1

I’d really like to get a bit more on -par with keeping my minefield of divs organized (I’ve completely lost control of all the divs on this project, and I feel it’s messy) and get this right before moving on to Javascript.

Overall, I’m relatively satisfied with how it looks, but when I view it on my phone, the placeholder picture in the “portfolio” section still goes off-screen a bit and I have to scroll horizontally to get the full picture in-frame. Also, my top nav bar does not look good on mobile either, as all of the sections are kind of scrambled. Any advice? Thanks guys.

2

Hi @vxm007. I don’t use much of codepen because i work locally. But here is what I have noticed so far from going through your HTML.

  • There is no <html> opening and closing tag. Neither is there a <head> opening and closing tag.
    I might be wrong but i think it’s still needed on codepen. What is not needed is the <!doctype html>declaration.

  • Since you are using bootstrap framework, when you make your first div for a content, you should also make a div inside with the class container or container-fluid. This gives responsiveness to your page as the screen size changes.
    for example your about div can look like this:
    `

    ............contents
    `

    • For your header and nav-pills, you don’t need to give the class pull-right to each <li> it’s sufficient if you just add the pull-right class to the <ul>.

    • Then for your portfolio section, I see you wanted to make a bootstrap row so something. Yiu made the row and column quite alright, but you didn’t put anything inside the columns or row…
      <div class="row"> <div class="col-xs-6">

      Portfolio

      (Projects Coming Soon…)

      ` 
      <a href="#">

    <img class="portpic" src="http://platowebdesign.com/articles/wp-content/forum/uploads/2014/10/public-domain-images-free-stock-photos-light-sky-silo-windows-lillyphotographer-1024x684.jpg">
    </a>
    </div>
    </div>
    That is how you put stuff inside a column.

    • Your form looks quite alright…
      There are my observations… hopefully someone can see something i didn’t and give other suggestions.
      Happy coding it only gets better.
3

Click the gear right next to the html tab in codepen. In the section called "Stuff for <head>" is where you want to paste your font and font awesome references. Checkout my screenshot:

Screen Shot 2016-09-19 at 4.12.20 PM.png989×599 97.9 KB

After you do that, you can remove it from your build in codepen and it will appear in the <head> tag when you inspect element. That should help out with the first bullet point in @OnomeSotu 's comment. :slight_smile:

1 Like
4

As far as the navbar goes you should add the class navbar to that otherwise it won’t act like a navbar. You should also add navbar-collapse if you want it to work on mobile. Then split your left and right links into 2 lists. There are some navbar templates on the bootstrap site. Copy, paste and adjust it to suit your need.

Try adding img-responsive class to your portfolio image and removing the max-width CSS property

A couple of small things I also noticed

You haven’t closed off your portfolio div completely - you’re missing a </div> there

and this

<h1 id="porth1" text-center>Portfolio <h3>(Projects Coming Soon...)</h3></h1>

is probably better wrapped in a div so you can structure the h tags properly and your class-center needs a class attribute

<div>
  <h1 id="porth1" class="text-center">Portfolio</h1>
  <h3>(Projects Coming Soon...)</h3>
</div>
1 Like
5

@d33con thanks I appreciate it! Unfortunately I tried the tweaks with the navbar and this is what it ended up looking like on mobile:

6

I suggest you read up on how to make responsive navbars. When I meant add those 2 classes I meant those were the starting points, you still need to add other classes and data attributes to the navbar and links on it for it to become responsive, which content is collapsed and where links sit.

Have a look here and inspect this page’s code to see what I mean

http://getbootstrap.com/examples/navbar/

1 Like