Hello,
I’ve been working on the Build a Tribute Page assignment, and I can’t seem to nail down
the responsiveness aspect of this project. When I view the Codepen on my mobile, here are the
issues I’m seeing:
- the main image at the top of the page looks a bit squished
- the text and images throughout do not stack evenly – they are offset a bit
- the text of one section is bleeding off the edge of the page and into the border
- the info buttons in the last section are way too close to the black border
- the entire page doesn’t quite adjust to the width of my phone, so I have to swipe back
and forth to see everything
I have a feeling a lot of these problems have to do with padding/margins and/or the grid layout.
I’d appreciate any feedback and suggestions on any of the above issues or anything else
you happen to see. Thank you!
–Laura
Just skimming through your project, I thought that I could give you some info to help you out:
- In Bootstrap, Columns should always be in rows. If you want a nested row, it should look like this: Row–>Col–>Row–>Col and the pattern repeats (I saw that your header div had Row, Col, Col?). Look here for more info: https://v4-alpha.getbootstrap.com/layout/grid/.
I predict this will solve most of your problems.
- Images in Bootstrap should have the img-fluid class, fixed width & height (Bootstrap will still scale it), or the other img class that is slipping my mind right now.
This should fix your image-scaling problems.
- You don’t have to have your buttons in separate divs. You can pop them in one Column and give them display: block to make them display vertically.
- You can make elements have different widths based on the screen size. For example, your buttons at the bottom have col-xs-6. You could give them col-xs-12 and col-sm-6 to make them more dynamic.
Also, here is a link to another one of my projects (Not my Tribute page, it’s terrible) for you to look at:https://codepen.io/TheyLeftMe4Dead/pen/eRYVra?editors=1000
Other than that, I think your Tribute page looks pretty solid. I like the paper background & font family you used. It’s prettier than my slapped-together page 
(I should really go back and fix it sometime… ).
Ah. For some reason I was thinking I needed to arrange columns that I wanted to appear side by side in a single row. Not sure why I thought that. Just noob confusion, I suppose.
The buttons-in-divs thing was a last-ditch attempt to figure out what I was doing wrong on this page. Right after I saw that didn’t help matters, I posted this cry for help :).
I will give all your suggestions a try. Thank you so much for taking the time to review my code and post this and the link to your project – nice color scheme, by the way!
–Laura
You do put two Cols in a row to put them side by side. Sorry if I misphrased it. Just know that each row holds 12 columns. If you go over the 12 columns, your columns will ride onto the next row.
Got it. Thanks for the clarification. Guess I wasn’t as far off as I thought – if I had more than 12 columns in a row, it was purely accidental, not because I thought that was correct.