Title: Issues with Responsive Design on Website https://white-cube.kz/

Question:

I’m currently working on the responsive design for a website called https://white-cube.kz/. The site looks great on desktop, but I’m experiencing some issues when viewing it on mobile devices. Specifically, the layout breaks, and certain elements overlap or disappear entirely.

Here are the specific issues I’m facing:

Navbar: The navigation bar doesn’t collapse properly on smaller screens, causing menu items to overflow.
Images: Some images don’t resize correctly and either become too large or too small, disrupting the layout.
Text Overlap: On certain pages, text elements overlap when viewed on mobile devices.
Footer: The footer content is misaligned and doesn’t stay at the bottom of the page on smaller screens.
I’ve tried using media queries to address these issues, but I’m still encountering problems. Here is a snippet of my CSS:

/* Navbar */
@media (max-width: 768px) {
    .navbar {
        display: flex;
        flex-direction: column;
    }
    .navbar-item {
        margin-bottom: 10px;
    }
}

/* Images */
img {
    max-width: 100%;
    height: auto;
}

/* Text Overlap */
@media (max-width: 768px) {
    .text-container {
        font-size: 1.2em;
        line-height: 1.4;
    }
}

/* Footer */
@media (max-width: 768px) {
    .footer {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

Can anyone help me identify what I might be doing wrong and how I can fix these responsive design issues? Any tips or best practices for ensuring a smooth mobile experience would be greatly appreciated!