I'm trying to center this burger. I used "grid place-items-center" so it gets centered and "h-screen" in order to let it be centered in the full height.
The problem is that it's not in the center, obviously because of the logo at the top.
how do i ignore this logo and center it anyways?
The navbar i'm coding
Greetings, PixelPage
You are almost there. The only thing you need to do is add a w-full to the parent div of logo (the one with the absolute class).
<div class="fixed left-0 h-screen bg-gradient-to-t from-[#07C8F9] to-[#6D8AE4] w-24">
<div class="w-full absolute grid place-items-center mt-8">
<img src="/assets/branding/logo-white.png" class="w-12 h-12"></img>
</div>
<div class="grid place-items-center h-full">
<img src="/assets/common/Burger.png" class="w-16 h-16"></img>
</div>
</div>
Hope this helps.
Read through this guide, it is invaluable, and I reference it all the time. It should help you figure out how to use grid to place your items: https://css-tricks.com/snippets/css/complete-guide-grid/
Related
This is the demo of my problem.
And this is the outline of my HTML:
<div class="container">
<div class="f1">
TITLE
</div>
<div class="f2">
<div class="f2-child">
<img/>
</div>
</div>
</div>
Basically it's a flex container which contains two flex items. The first flex item(f1) is the title, which takes up some fixed height. And the second flex item(f2) fill the rest of the height. So far so good.
And I put another flex container(f2-child) inside of f2, just to create some margin space. And I want an image to fit inside f2-child. The image should be as wide as f2-child, but its maximum height should be the same as f2-child.
It works fine when the viewport's width is low, but when the width gets higher, the image would overflow. I tried setting f2 and f2-child's max-height to 100%, but it does not work.
To solve the issue of the image overflowing, you can try setting the max-width property of the image to 100% and the width property to auto. This will ensure that the image's width is equal to the width of the parent container (f2-child) and its height is proportional to its width, preventing overflow.
You can also add overflow: hidden to the f2-child container to clip any content that exceeds its boundaries.
Here's the updated code:
<div class="container">
<div class="f1">
TITLE
</div>
<div class="f2">
<div class="f2-child" style="overflow: hidden;">
<img style="max-width: 100%; width: auto;" />
</div>
</div>
</div>
Add the two tailwind classes h-full object-cover to your image tag.
<img src="https://source.unsplash.com/04X1Yp9hNH8/1600x900" alt="img" class="w-full h-full object-cover"/>
I've figured out myself by learning more about how flexbox works.
This is my final outcome: codepen link. I use tailwind so you need to know a little bit about it.
Now my layout looks like this:
<div class="container">
<div class="f1">
TITLE
</div>
<div class="f2">
<img/>
</div>
</div>
I removed f2-child from the last version.
The flex direction of the container is column, so after determining the height of f1, f2 would stretch itself. f2 is also a flex container, but with row flex direction. The image is its flex item.
Notice how f2 has multiple tailwind classes. flex items-center justify-center make sure image is horizontally and vertically aligned in f2.
And f2's grow-0 shrink-1 basis-auto h-full min-h-0 plus img's max-h-full make sure that when the view port is wider, the content won't overflow.
For more details you could see this post: Prevent flex items from overflowing a container
I'm a bit new to using flexbox and I've ran into one problem I can't seem to fix.
What I want:
I want to have a container taking the available height, but whenever the content inside it takes up more space than the containers height, apply overflow:scroll
Context:
Ref image:
container image
As you see on the image, everything inside of the red brackets are covered inside of a div with flex-grow:1, I want this because the images might be different sizes so therefore I need the div to take the reamining space.
As for the white container, that is also using flex-grow:1 so that the button can be on the bottom of the div.
Now, what I would like is for the content inside of the blue brackets to be taking the available height, but if there is more content than the available height, then I want it to be scrollable.
The thing that happens now if I add a lot more content to the container inside of the blue brackets, it pushes everything below it further down, meaning the overflow isn't working.
E.g Like so
As you see in the image, everything is just pushed further down and the div is being stretched.
Here is the code I have so far:
<div class="flex flex-col grow overflow-y-auto w-3/4 my-2 mx-auto bg-white max-h-full">
<!-- img -->
<div>
<img [src]="currentUser.photoURL" class="w-full mx-auto">
</div>
<!-- information -->
<div class="flex flex-col text-black grow">
<!-- Info -->
<div class="flex flex-col p-2 divide-y grow overflow-y-auto">
<div class="flex flex-col">
<p class="font-bold">{{currentUser.displayName}}</p>
<p class="font-thin">{{currentUser.email}}</p>
</div>
<div class="p-2 overflow-y-auto max-h-[90%]">
<div class="h-full grow-0 overflow-y-auto">
<p>
some information about {{currentUser.displayName}}
</p>
<ul>
<li>
Some values are
</li>
<li>
Some experience are...
</li>
<li>
Why im helping people...
</li>
</ul>
</div>
</div>
</div>
<!-- Message -->
<div class="shrink-0 p-2 text-center w-full bg-blue-500">
<button>Send melding</button>
</div>
</div>
</div>
I'm using tailwindCSS for this project, but will happily take suggestions in normal css as well.
I think the simplest solution for this would be to set the div you want to be a scrollable as "display: block" (or at least some version of block) with a fixed height. Once you apply that fixed height, your overflow content ought to be scrollable.
I'm using tailwind. I want to create a layout with a fixed-size image. My container is 1200px and centering viewport.
The image will be overflow when the viewport is smaller, but I want to hide the overflow part of the image. That means the user can't scroll to view it. Thanks
Here is my code: https://play.tailwindcss.com/YVOEhykx1E
Here, Is the little update! I think you can do more better by exploring documentation
<div class="h-screen mx-auto bg-red-500 grid grid-cols-12 gap-8 overflow-hidden">
<div class="col-span-12 col-start-8">
<img class="object-cover h-full w-full" src="https://images.unsplash.com/photo-1640686708297-e6dc01470fb8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80" alt="" />
</div>
</div>
I want to create a layout like below with tailwind. I don't know how to make the blue area have full width but the purple area has a limit at 9/12 grid.
12 column is max 1200px.
Here is my code:
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet"/>
<div class="container lg:w-1200px bg-red-500 mx-auto flex">
<div class="w-3/12 bg-blue-500 grid place-items-center h-screen">3/12</div>
<div class="w-9/12 h-80 relative">
<div class="bg-yellow-500 h-20"></div>
<div class="bg-green-500 h-screen grid place-items-center">9/12</div>
</div>
</div>
Maybe it's just complex with me, not you. So sorry about that. Thanks!
To create the target layout
absolutely position the blue box relative to screen, using w-screen class so that it takes the entire screen width
use a standard grid layout for other boxes, relying on col-span classes to size them according to requirements
finally, use w-[1200px] class to set the width of the grid layout, and add a left-padding pl-[300px] to the blue box so that its content is away from the red box. As using these "pixel-perfet" arbitrary classes does not work in the code snippet, I replaced them respectively with w-96 and pl-24
See below an implementation example
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet">
<div class="w-96 h-screen bg-red-100 grid grid-cols-12">
<div class="bg-red-500 col-span-3 z-20 relative">Something in red</div>
<div class="bg-blue-500 w-full absolute pl-24 h-12 z-0">Something in blue</div>
<div class="bg-purple-700 col-span-9 z-20 transform translate-y-7">Something in purple</div>
<div></div>
</div>
I'm trying to get buttons to stretch across the screen with tailwind, but either they align left and don't stretch out (most cases), or - as in the current state of the code, they seem to stretch off the right hand side of the screen!
I'm sure I'm missing something obvious but can't see what it is. My header and footer stretch appropriately, and originally I just duplicated them, but as buttons, not divs.
Code (stretching off screen version) currently looks like this:
<body>
...
<div class="">
<div class="block">
<ul class="">
<li><button class="w-full bg-orange-200 hover:bg-orange-400 rounded-lg mx-6 my-4">
<div class="text-black text-lg content-center">
<h2 class="font-bold">Mike's big adventure</h2><br>
<div class="text-black text-base">Aargh, zombies!</div>
<div class="text-gray-600 text-xs">
<div>Created: 2020-03-24T12:57:01.753Z</div>
<div>Updated: 2020-03-24T13:00:06.411Z</div>
</div>
</div>
</button></li>
... more list items
</ul>
</div>
</div>
...
(Note, don't think it makes a difference, but the html is actually being generated by an Elm SPA)
How do I need to nest the various container, w-full, w-screen, button etc. and what combo do I need to get what I want?
Edit: This snippet isn't the only thing that isn't stretching. For example neither does the page header. The page footer, which is attached to the bottom of the screen, stretches all the way though ...
Header:
<div class="container flex-auto w-screen m-2">
<div class="w-full content-center bg-orange-500 rounded-lg">
<h1 class="font-bold text-5xl text-center">Header</h1>
</div>
</div>
Footer:
<div class="container flex-auto w-screen mx-2">
<div class="absolute inset-x-0 bottom-0 bg-orange-500 rounded-lg m-2">
<div class="m-4">Footer</div>
</div>
</div>
You should make the <li> full width since the button is nested in it and take the width of its parent which is the li. Add a w-full class.
Maybe also try adding a block class to the button as well
Add