Help with final project -resizing doesn't work, can't find the problem in order to apply a solution

Projects
1

Made my page using Codepen just for the sake of getting to practice without waiting until I lean Sublime. There were a few weird glitches and stuff that I just worked around.

Not sure how to fix the sizing/scaling issue. Looks fine on laptop size and then is just a cluster as it gets smaller.

Any feedback appreciated! Thank you


hyperlink

2

i recommend bootstrap - css, it explains how to use col-xs and col-sm for smaller screens

you will see the @media query, which allows you to use different css code for different screen sizes, you can read about it here

3

Thanks for the links. I’ve read through them before, but can’t figure out where there is an issue in my code. I’ve got all the main containers on -fluid, a clear fix on another area, changed images to be percentage based. I’m taking shots in the dark at what the problem is, so fixing it is also just a shot in the dark.

The

4

the codepen no longer exist? I can’t fix something i can’t edit

5

oh no!

check here: http://codepen.io/meganvieno/full/VmXeGQ/

6

clicked it, still get a 404 page:

1366Ă—737 108 KB

7

That’s super weird…it opens for me even in incognito where I’m not logged in…

Thanks anyway for trying!

Uploading…

8

weird, something went wrong, i cloned it into my own codepen account. Now it is working, let me have a look

i put it on jsbin, snice i have problems with codepen for a unknown reason. Now, what exactly was the question?

9

thanks! The “contact” image in the contact section pushes into the footer when the page is resized down. I tried a variety of ideas (img-responsive, sizing, etc.) and just never found a magic combo to make it work. Asked an advisor and they couldn’t figure it out either.

10

i don’t have time to solve such a big problem today, i have to come back to you on this tomorrow

have you tried col-xs and col-sm for cols on a smaller screen?

11

you should do it the other way around with your footer you should do:

<div class="row">
   <div id="footer"></div>
</div>

same for other things, so the row sits beneath each other

12

huh, in Codepen that makes it worse…

I’ll just start over. Thanks though!

13

but you have to lay out the grid system first. You have to make the rows and columns first, then add content inside of them. The problem is that you have the row inside of another div. This shouldn’t be

The grid system is the essence of the page, they should be the outer divs

14

for example here:

  <nav class="navbar navbar-default navbar-fixed-top">
    <div class='container'>
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span>
        </button>
        <a id="brand" class="navbar-brand" href="#slayin"> <h1> [ Megan Vieno ] </h1></a>
      </div>
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#portfolio"class="btn"><strong>Portfolio </strong></a></li>
          <li><a href="#bio" class="btn"><strong>About</strong></a></li> 
          <li><a href="#contact"class="btn"><strong> Contact</strong></a></li>
        </ul> 
      </div> <!-- myNavbar -->
    </div> <!--container-->
  </nav>

this doesn’t make any sense, the container should be on the outside:

  <div class='container'>
    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span>
        </button>
        <a id="brand" class="navbar-brand" href="#slayin"> <h1> [ Megan Vieno ] </h1></a>
      </div>
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#portfolio"class="btn"><strong>Portfolio </strong></a></li>
          <li><a href="#bio" class="btn"><strong>About</strong></a></li> 
          <li><a href="#contact"class="btn"><strong> Contact</strong></a></li>
        </ul> 
      </div> <!-- myNavbar -->
    </nav>
  </div> <!--container-->

this problem is throughout the code, the grid (which is the backbone of your website) is not properly laid out

and so on.

15

Yeah, I think I really just need to start over and make a new site. I need to find a better/more tutorial on the grid.

Thanks though for the help!

16

i think i can fix it, but this will take me an hour, or two. Quit a lot. (for free help, that is a lot of effort)

edit: I simply meant here that this is me too much work as moderator, nothing more!

Reading some more about grid, start here

17

I’m not asking you to fix it. I’ve said multiple times I plan to re-do it.

18

true, you didn’t, did i provide sufficient help?

good luck! that will take some time

1 Like