For a project, I needed a 2-column layout with the left column being red and the right column white. The left column contained text while the right column had an image. It looked great on larger screens, but I encountered issues on smaller screens due to the background gradient I was using. I had to create multiple media queries and adjust colors and heights to fix the problem.
I feel like I might be approaching this issue incorrectly. Is there a more efficient way to achieve this layout using Bootstrap or CSS that works seamlessly across all screen sizes?
The code snippet below shows my current solution:
.app-headline {
background: linear-gradient(to left, #fff 50%, #d4272e 50%);
}
@media screen and (max-width: 992px) {
.app-headline {
background: linear-gradient(to bottom, #d4272e 52.2%, #fff 50%);
}
.app-headline .text-content-left {
background: #d4272e;
}
.app-headline .img-contet-right {
background: #fff;
max-height: 24rem;
}
}
@media screen and (max-width: 768px) {
.app-headline {
background: linear-gradient(to bottom, #d4272e 59.9%, #fff 50%);
}
.app-headline .img-content-right {
background: #fff;
max-height: 17rem;
}
}
@media (min-width: 768px) and (max-width: 768px) {}