I'm trying to make a segment of a webpage where an image will appear on the left or right and directly next to it there can be text centered on its segment of the page (see image). However, the element…
I have a container that has a scrollview component nested inside that is also a container. Inside the scrollview container, I am looping through data and then trying to make the children be 2 items per row and also fill…
I have a .section-offerings section in my html file, inside I have 2 divs that will be rows in a table of features about a product. Each row is supposed to have an icon and a description of the feature,…
I'm trying to build out something with flex that has a layout like this... [] [][][] [][][] My breakpoints are fine when stacked (1 item per row), or 2 items per row by using ul { flex-direction: row; flex-wrap: wrap;…
Im trying to get multiple divs with diffrenent heights to use their given space. The problem within my example is that there are still some empty space wich is not filled. My Code looks like this: <!DOCTYPE html> <html lang="en">…
the unitgrid needs to be aligned vertically and horizontally to be just below maingrid. maingrid is in the center of the page. the image is attached below to where the unit grid needs to be placed which is under maingrid…
I'm having an issue with element positioning on my web page I'm trying to code the header from the design. Here is the design: As you can see, the distance from the border should be the same for the Login,…
body { display: flex; justify-content: center; align-items: center; gap: 15px; } .circle { display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #333; color: #fff; font-size: 32px; font-weight: 600; border-radius: 50%; padding: 20px; aspect-ratio: 1 / 1; } <body> <div…
#title-row { display: flex; justify-content: center; width: 100vh; text-align: center; height:100vh; } .title-img { z-index:1; position: absolute; left: 0; top: 0; } .title-row > p { z-index: 2; position: absolute; font-size: 30px; font-weight: bold; left: 135px; top: 130px; } body…
just getting started with flexbox. After managing to align img div and text div, I added the "felx-wrap:wrap" to the container so that img and text would be stacked on top of each other on smaller screens. Now they are…