Latest solutions
Loopstudios Multi-Page Website using Flexbox and Mobile-First strategy
Submitted 12 months agoIf someone can please tell me what is causing the hero image on the landing page to only show a detail, rather than covering the whole background, I appreciate it. I used background-position: center; and background-size: cover; Also, what do you think of my code? I try to write as DRY and clean as I can, and I am always trying to improve. Thank you!
Latest comments
- @chianglynn@rspatz
Hello Chiang, When I previewed your live site, I noticed that in the "Latest Articles" Section, you had too much padding on the left, and the 4th article/image was pushed to a second row. I downloaded your code and found the problem. If you change CSS Line 524 to separate blocks of code for .section-2 and .section 3, such as:
.section-2 { text-align: left; padding: 7rem 9rem; }
.section-3 { text-align: left; padding: 7rem 6rem; }
all 4 articles will be on one line. Finally, on line 552, I suggest adding a margin-left:
.section-3 h2 { text-align: left; margin-left: 1.5rem; }
This will make your h2 heading "Latest Articles" line up properly. I don't know that this is the best solution, but I hope it helps!
Marked as helpful