- I don’t know how to get rid of that weird horizontal line in the middle of the page.
- I don’t know how to make everything line up better on a phone screen.
- And also, why do my last 3 pictures not appear on a phone?
Thanks so much for any advice!
1- I don’t see any horizontal line, weird or not. Do you mean the vertical line left of the quote? That’s how quotes are displayed by Bootstrap.
2- On my phone the page doesn’t quite fit. You have a viewport problem. To fix it, clear on the gear next to HTML. Under Stuff for head there’s a button called ↑ Insert the most common viewport meta tag. If you click it, it adds the code you need to have in the <head> for responsive pages.
3- All your pictures appear on my phone. Maybe your images are big and take a long time to load? (I didn’t check)
Apart from the viewport problem, it looks good on mobile.
Once you’re happy with your mobile version, test bigger screens. There’s something weird happening with your col-md-6, not sure what but it doesn’t manage to display things side by side.
One last thing: I notice you include CSS from Bootstrap 4 for bootstrap-grid and Bootstrap 3 for everything else. Is there a reason for that? It sounds like it might cause problems down the road. Maybe that’s actually where the column problem comes from.