This is the code I've written out, but there has to be a more condensed, elegant, and effective way to write media queries for scaling screens, right? selector { padding-left: 19% } @media only screen and (min-width: 1300px) { selector…
I have this aqua container with 6 divs inside of it. I'm using flex-wrap to wrap the divs when they get too big for the current screen, however I want the first div on the top line to align to…
I'm trying to make a responsive header that when the screen size is smaller than 992 a hamburger menu appears that controls the menu using a checkbox. The problem I'm trying to solve is the menu not showing even if…
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…