I had always built websites with the help of CMS (wordpress mainly) so I’m very proud to have built a page with only “coding” skills (even though html and CSS are not programming languages ). I know it’s faaaar from perfect, but it’s a start. I also tried to incorporate some CSS Grid.
Would love to hear some feedback!
It would be nice if it had responsiveness to it
I thought it was responsive haha. I even submit it to google mobile-responsiveness test.
Well this is how it looks like on my phone. This is on Samsung Internet but I also checked it on Google Chrome. Same result.
Thanks a lot for the feedback!
I thing I got it right, this time.
Pictures in the grid weren’t looking too good as width got smaller, so I added a media query to vanish them.
Better responsiveness. But not quite. Still has a scrollbar. You might want to set the width of the header in a responsive unit like % or em. That might be the problem. You can also give the images a 100% width and make them stack up vertically instead of horizontally in mobile. That’ll make the images still look big and viewable. Other than that it’s mainly decoration and style preferences. I’d make the video in the middle so that people can see the video and then will want to read more. Um a horizontal break at the end of the article and before the footer to let people know where the article ends. Such and such.
Also if your article is in a div element, set a responsive unit to it as well.
Thanks once again! Your comments really help. I managed to fix it by doing what you said, but I also had to add an width: auto to the iframed video, because this was the one causing the main problem.
Now when I drag the window to below 325px width I still get a horizontal bar. Is this normal and to be expected because of the very low width? Or should I never see a horizontal bar in a responsive website?
Much better now. I don’t see a horizontal bar at all! My phone is Samsung Galaxy A9. Its pretty wide so it doesn’t demonstrate the effects of under 325px. You might see that in an iPhone. Since this is just an FCC project, you might not have to solve minute problems like this. In an actual website tho, you’ll have to make sure it’s responsive all the way. (There’s a scrollbar on FCC on my phone haha)
Tweaks I would make to your page:
- the video’s height could be a little less than what it is now. The width is great.
- tad too much margin on the article?
- paragraphs are a little long you might want to break them up at reasonable points in the article. For readability purposes.
Everything else is good. You are good to go.
Glad I could be of help.