I am trying to create a sample responsive web page with navigation bar for big as well as small screens. I have done with the part for big screens. I am trying to create for smaller screen devices, with a…
I would like the "left-side" of my project to appear above the left side of my project when the screen is small. The issue that I am running into is that as the screen shrinks the left side will become…
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;…