If you have a course with a certain length of text as well as a course image, the course text doesn't scale with the image, which results in a horizontal scroll. See image below:
However, this does present the case that the background of the text (show by the cornsilk colour) will extend further than the name of the course itself when in desktop view. So, I'm not sure which situation is the most ideal.
You could also use a media query and set the width to 89% but still, leaves us with the same issue.
Good day,
If you have a course with a certain length of text as well as a course image, the course text doesn't scale with the image, which results in a horizontal scroll. See image below:
A suggestion might be to move the course-header-txt code inside of the course-header-image code so that it scales with the image. Then change the .course-header-txt class to:
.course-header-txt { position: relative; display: block; top: 10%; padding: 10px; margin-left: 2%; margin-right: 2%; background-color: cornsilk; border-radius: 5px; }
However, this does present the case that the background of the text (show by the cornsilk colour) will extend further than the name of the course itself when in desktop view. So, I'm not sure which situation is the most ideal.
You could also use a media query and set the width to 89% but still, leaves us with the same issue.
Hope this helps!
Regards, Dillon