1 question and general feedback on my first project: Tribute page

1 question and general feedback on my first project: Tribute page
0

#1

Hi everyone, thanks in advance for taking the time to checkout my first project. I realize its not the prettiest and I feel like the code is a bit sloppy.

Can someone please tell me why I’m not able to get my last h4 element underneath the quote p section? Its placed under the quote in the code, so why doesn’t it appear that way on the page?

And any other feedback would be very much appreciated

Thanks so much!
Project


#2

If you remove col-xs-4 from the quote, and col-m-4 from the final <h4> that will line them up one on top of the other. You had them set up as two columns on the same row when you used those two classes.

Also I would move everything between your style tags to the CSS box, and as much of the inline styling you used as possible too. While testing I removed the sizing from your .image-size class, and added the classes img-responsive and center-block. Since you’re using bootstrap. That will set you image to be centered, and to have a width of 100%, and a height of auto. Meaning it will change sizes with the screen. Instead of always being 800px wide.

And, I got rid of a few of your hard coded pixel margins for things like the <ul> and your quote, and just wrapped them in a <div> with the class container.

You can look at the changes on my copy on Codepen. Not much, but it fixes your responsiveness, your original question, and cleans up your code by using and external stylesheet.

Hope this helps :slight_smile:


#3

I don’t know if you got my last reply I’m not seeing it here for some reason. Anyways, I redid the whole page and used what you showed me. Thanks again!

Tribute


#4

Awesome! Looks good!

The only other thing I would do is at the class img-responsive to your <img> tag so that it changes sizes depending on the size of the devices screen. Everything else works just fine, and it all looks great.


#5

lol I was JUST gonna ask you about that because I checked it on my phone and the image was still too big for the screen when i held it vertically. I totally forgot to add that to the image. So I added it and it looks great on the phone thanks again man!


#6

Any time! I’m glad I could help :slight_smile:


#7

HUGE help man. Hey if you get chance could you take a look at my code for the portfolio project? any advice you might have. I’m not done with it and I imagine it’s probably gonna change over time as i learn more. I also have a question. The code I used for the scrolling I stole from someone at stack overflow. Is there an easier and better way to do this? With less code.

Thanks!

Portfolio