Colmar Project Feedback & Questions (1. Text out of divs 2. Mobile browser view not matching)

Requesting feedback to my completed Colmar Academy Project, as well as three specific questions:

Site here: https://darrentseng.github.io/colmar_academy_final/
Github: https://github.com/darrentseng/colmar_academy_final

1) DESKTOP: In the “Start Learning” Section of the site with highlighted subject blocks. As I change the size of the browser, the text tends to extend outside of the div, even if I have padding added or not. What’s the best way to resolve that issue?
(

)

2) MOBILE: When I test the github link on a mobile device (Pixel), it looks very different from when I’m reducing the browser size. For instance, the main banner gets stretched, and the fonts do not scale appropriately in size. Am I missing another step?

  1. Are there better rules of thumb or strategies that you use to keep your HTML/CSS docs more condensed? As I inspect random sites with Chrome Dev Tools, the CSS looks a lot more condensed as they merge different features together in rules, however, does that make it easier to manage or worse given it’s not in the same sequential order as the site and html (as you scroll down).

Hello @dtseng10. Overall, I really like the look and layout of this website that you’ve created.

Well. I think I’ve found a solution, and I can point to you to some articles, but I can’t say that I know exactly what’s going on. The main rule that I found to work was overflow-wrap. It seems this deals with the way text wraps within its parent element. I set this to word-break, and with a few other tweaks, the problem seemed to go away.

Tweaks-I shouldn't think these made a difference, but I'll say them-don't look unless my above suggestion didn't work

I removed the padding in the media query for the parent element of the text, however that may not be required. I also set the text-align to left, but that almost certainly didn’t do anything. I also removed the padding rule from the .subjects-block-txt, which seemed to have a great effect. I think this is because this, combined with the overflow-wrap made the text go to the edge of the container, and then break, but again, it maybe just be coincidence.

As for question 2, I’m not quite sure what you mean by that, as I can’t notice anything (sorry if there’s something obvious that I’m missing).

As for number three, I think it is up to personal choice, and the requirements of the site. However, I’m not in any way a developer, so that is completely my opinion.

I hope some of this has been some help!