/* ************************** */ /* BELOW 1350px (Smaller dekstops) */ /* ************************** */ @media (max-width: 84.5em) { .sticky-note { width: 30rem; height: 30rem; } .motto-heading { font-size: 5.2rem; } .product-description { font-size: 1rem; } } /* ************************** */ /* BELOW 1200px (Landscape Tablets) */ /* ************************** */ @media (max-width: 65em) { html { font-size: 56.25%; }… Read More My navbar going under / overflowed by another elements on mobile view

I am making a very simple site for my application, but I still want it to not look half hearted. Currently, I cannot get the button aligned to the other two elements properly. Picture reference: I want all elements in the picture to align properly on a single line. Here is my html/css code so… Read More Button is lower than the other elements

I am having an issue with z-index stacking on an app I’m building. The code is displayed below. It is a react application using tailwind.css. For the app I have a hamburger menu in the header that appears fullscreen as a modal when the hamburger symbol is clicked. The functionality works fine except on the… Read More Z-Index stacking issue in React/tailwind application

I have a #popup-shadow div that takes all the viewport, in order to make #popup modal, and prevent everything out of #popup to be clickable. This works. Problem: it even makes everything inside #popup unclickable. Why? Since #popup has a higher z-index (value 100!), why is the OK button unclickable? #popup-shadow { position: fixed; top:… Read More Why doesn't z-index allow the OK button to be clickable?

I’ve created a div that I have positioned absolutely over this map: Here, the element I’m talking about is a div containing the four white ovals. So this div has position: absolute; z-index: 1. Now notice the hamburger button in the top right – this opens the side navigation menu, like this: However, as you… Read More Absolute Positioned Element rendering over other element with higher z-index