How to center image, make it responsive, and make text responsive, tribute page

How to center image, make it responsive, and make text responsive, tribute page
0

#1

I am having trouble centering my image and making it responsive. My text also. The text looks fine on my laptop but the formatting gets messed up when loaded on a phone. Any ideas on how to fix my code? Much appreciated! Thanks!


#2

Hey, for centering the image use this:

img{
  margin: auto;
}

The problem with your text is that you used width: 50%. It would be easier if you used the Bootstrap grid. You can also remove the width: 50% and add text-align: center to your ul, but this gives a slightly weird result.


#3

Or, better yet, let Bootstrap do it for you: From http://getbootstrap.com/css/#images:

To center images which use the .img-responsive class, use .center-block instead of .text-center. See the helper classes section for more details about .center-block usage.

I’ll try to figure out what you mean about the text getting messed up.

By the way, your layout is working for you, but the concept of “row” and “col” works a little differently. Don’t worry, I feel like FreeCodeCamp doesn’t quite explain it thoroughly. A read-through of http://getbootstrap.com/css/#grid should help, though it’s a bit confusing too. Watching a few videos of https://www.udacity.com/course/intro-to-html-and-css--ud304 helped me. What I’m hinting at is that you’ve got your whole page wrapped up in a “row,” and it doesn’t seem to be breaking anything, but it isn’t really necessary. The point of the rows and columns comes when you want to put two things side by side, when normally everything stacks vertically. Right now all the components of your page are stacked vertically, so no problem.

Update: Oh, I see somebody left a column saying you need to use row and col. I think their point was more “consider a layout that puts some things side-by-side,” though I’m not sure I even agree that it’s important. Anyway, it would be beneficial to Google the term “box model.”

Also, +1 for a John Calvin fanpage! SDG 4 EVAH, amiright?


#4

Okay, I see what you mean about the text–the <ul>. (By the way, do you know about this way of checking what it will look like on multiple mobile devices?) So this is the perfect time for that <row><col> business. By saying <div style="width: 50%>, you’re saying “this will always take up only 50% of the screen, no matter how small that screen is.” If, for instance, you said:

<div class="row">
  <div class="col-s-12 col-md-6 col-md-offset-3">

… you’d be saying, "On small screens, make this take up the full screen (12 units). On medium and larger screens, make this take up half the screen (6 units), and indent it by a quarter of the screen (3 units). Note that things propagate upwards; you never have to say col-s12 col-md12; col-s12 means “small and anything larger = 12.” It’s only when you want “one thing on small, and something else on larger” that you have to specify the larger ones.


#5

Thank you so much! Your advice helped me out a ton! :smiley: SDG all day every day! And into eternity!


#6

hey guys, can anybody help me? i can’t make tribute page responsive. text is responsive up to some point, and picture is not responsive at all.
https://codepen.io/milosrancic/pen/QaVbgZ?editors=1000

Thank you so much :slight_smile:


#7

remove the set width 800px from the image in your custom css
add class to it <img class=“img-fluid” src=…