I am using CSS flexbox to create a row that has 2 elements: div that has 50% width with heading and paragraph div that has width of 28rem and contains flexbox grid. the row is set to flex-wrap: wrap. The…
*{ padding:0; margin:0; } a{ text-decoration:none; color:black; } ul{ list-style:none; } /* Uppermost bar */ #upper_bar{ min-height:10vh; max-width:100vw; background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%); /* background-color: rgba(0,0,0,0.3); */ color:black; display:flex; justify-content: center; align-items: center; font-size:2vw; } /* Header */ header{…
so im trying to build out a website for different screen sizes. now ive included a card section into this that is included into my website. now when my screen is at full size eg >1300px in width it should…
I recently started using HTML & CSS for my workplace. Now i ran into my first big problem: Making my Grid card elements responsive. I have four card elements in my column each with text which gains opacity when you…
I need some help to make my design responsive for small screens this little bit good for big screens but not for small please help to make it responsive. My welcome-message is hiding on small screen. body { margin: 0;…
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', () => {…