main .article-container { width: 60%; margin: 0 auto; margin-top: 130px; } main .article-container .article-intro { height: 200px; } main .article-container .article-intro .article-details { float: right; width: 65%; } main .article-container .article-intro .article-details .article-title { font-size: 32px; color: #5f9fa6; } main .article-container .article-intro .article-details .article-time, main .article-container .article-intro .article-details .article-date { font-size: 22px; } main .article-container .article-intro .article-image { float: right; width: 35%; } main .article-container .article-intro .article-image img { height: 100%; width: 100%; } main .article-container .article-content { margin-top: 80px; font-size: 24px; } @media screen and (max-width: 1020px) { main .article-container .article-intro .article-image { float: none; display: block; width: 100%; } main .article-container .article-intro .article-details { float: none; display: block; width: 100%; text-align: center; } main .article-container { margin-top: 50px; } main .article-container .article-content { margin-top: 250px; } }