Currently in the process of creating a website using HTML5, CSS3, and Bootstrap technologies.
Encountering difficulties while attempting to establish a stacked row-column layout. On desktop view, the design appears as desired, resembling this example:
https://i.sstatic.net/lbMmT.png
The issue arises when transitioning to responsive mode, causing the top row from the image to display incorrectly, leaving some grid cells out of view. Additionally, the footer ends up stacking over the row instead of being placed below it. This image shows the problem:
https://i.sstatic.net/45KuC.png
Provided is a snippet of the code:
/* HOME INFO
-------------------------------------------------- */
.row-home-info {
height: 300px;
background-color: #586f56;
padding: 0 !important;
}
... (CSS code continuation) ...
Seeking guidance on resolving this issue. The main concern seems related to the fixed heights set for the primary rows, but attempts with min-height adjustments have not yielded success. It might be a simple fix that I am overlooking, but despite a week of investigation and trial-and-error, a solution remains elusive.
Hoping for some enlightenment on this matter.
Best regards,