I'm working on a React component using Tailwind CSS, and I'm trying to achieve a specific layout. I have a div with an image and two paragraphs inside it. I want the paragraphs to be centered both horizontally and vertically…
I would like to change menu when is screen width lower to display menu link each in own line but when I use this, it is still same in one line. Then menu.jinja is used in another .jinja site where…
.container { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; flex-direction: column; } .item { margin: 10px; border: 1px solid lightgray; border-radius: 10px; overflow: hidden; width: 100%; } @media screen and (min-width:700px) { .item { width: 50%; } .container {…
I am creating a section of a page where I have to fetch the Movie Details and fill into these cards as user types but I encountered a problem, Where this section isn't covering the whole height space available. Any…
I have a container which I want to hide when screen is less than 1000px. css .desktop-links { display: none; } .active { display: block; } .in-active { display: none; } JavaScript: const desktopLinks = document.querySelector('.desktop-links'); shareBtn.addEventListener('click', () => {…
I have 2 static views: Headline and Bottom navigator (as mentioned in the attached visualization) with 3 rem and 3.5 rem height respectively, and I want to put a responsive view between them (the light blue area). The responsive view…
How can I make the child elements resize along the parent elements fluidly while maintaining ratio? As you can see on the attached video file aspect-ratio: 1/0 works but when you hover the HTML element, it becomes smaller than the…
I have a website that includes header images. However these header images do not seem to load at first when I load the website in Firefox or Safari on iOS. Here’s a screenshot: This is the code for the header…
When I run VScode live server, the whole page is too large and I don't have a responsive web page however in DevTools it work just fine. This is how page look in my screen This is how it shows…
On desktop there are 4 columns next to eachother, on tablets only 2 columns next to eachother. Somehow the 2 columns won't get aligned how they should be. I'm using 12 columns in total. col-x is for desktop, col-s-x is…