In order to make my site responsive using Tailwind CSS, I set my classes to change from two columns to two rows when it passes some defined breakpoints
<section id="hero" class="pt-12 pb-12 bg-yellow-400">
<div class="container grid items-center max-w-6xl px-2 py-2 mx-auto bg-yellow-100 lg:grid-cols-2 md:grid-cols-2 sm:grid-rows-2 xs:grid-rows-2">
<div class="">
<img src="./img/port-vector.png"
class="scale-50"
alt="logo">
</div>
<div class="text-center xs:pt-24 xs:pb-24 sm:pt-24 sm:pb-24 auto-cols-fr">
<h1 class="text-4xl">GABRIEL STEVEN</h1>
<h3 class="text-2xl">Front-End Web Dev, Designer</h3>
</div>
</div>
</section>
This works fine when it is in mobile, but once it is expanded to larger sizes, it leaves behind extra grid cells, which results in unwanted empty space. How can I get rid of these unwanted cells?
As #Saddy mentioned, you need to reduce the number of rows to 1 in addition to setting the columns to 2.
<div class="container grid items-center max-w-6xl px-2 py-2 mx-auto bg-yellow-100 md:grid-cols-2 md:grid-rows-1 xs:grid-rows-2">
As a side note, you can also omit sm:grid-rows-2 and lg:grid-cols-2 as the changes get applied from the given breakpoint onwards (e.g., using md: will also apply to lg: and xl: breakpoints).
Related
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 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 am trying to fit some text while designing on html and css, and I can't seem to find a way to do it.
I currently have this
and the objective is to have as it is here
what seems the best way to do this?
<div class="container h-100">
<div class="row h-100 align-items-center justify-content-center text-center">
<div class="col-lg-10 align-self-end">
<h1 class="text-uppercase text-white font-weight-bold adjust">Ignition<br>Dimension</h1>
</div>
</div>
</div>
This is not possible with just CSS. You need JavaScript to adjust the text size depending on its parent container. See https://css-tricks.com/fitting-text-to-a-container/
There is a proposal for CSS Container Queries but this has only been implemented in Chrome behind a flag
Except your parent container has the same width and height as your viewport. In that case, you could use vh/ vw to adjust the size based on the viewport
I have been working on a game and, for certain things, I used absolute positioning. In particular, I need it for some moving animations where I have to slide elements around and overlap them to create an effect.
I'm trying to work on making the game good-looking on mobile, and I've been running into some problems caused by Bootstrap columns that contain those absolutely positioned elements.
This is the look I'm trying to get (aside from the badly aligned number), notice the red squared row in the middle:
The whole center part of the screen (the row with buttons, emojis, and the centered card icon underneath) is a row containing cols. This is some of its markup
<div class="col order-1 order-xl-1 col-4 col-xl-2">
<div style="display:inline-block">
<p class="backgrounded-text" style="white-space: nowrap; text-overflow: ellipsis;"><span id="turn_elem">...</span></span></p>
<p class="backgrounded-text">Carta attuale: <span id="curr_card"><img class="card_icon" /></span></p>
</div>
</div>
<div class="reaction_box order-2 order-xl-2 col col-4 col-xl-2">
<span style="padding-left:5px!important;padding-right:5px!important" class="reaction_title">Reazioni:</span>
<table>
<!-- emojis ... -->
</table>
</div>
<div class="col order-5 order-xl-3 col-12 col-xl-3">
<span>...</span><br />
<span id="hidden_card">
<img class="card_placeholder" src="..." />
</span>
<span id="card_stack" class="slide_to_right">
<img class="card_placeholder" src="..." />
</span>
<div id="stacked_card">
<img id="stacked_front" class="card_placeholder" src="..." />
</div>
<div id="hidden_uncovered_card_div">
<img id="hidden_uncovered_card" class="card_placeholder" src="..." />
</div>
</div>
<div class="col col-4 order-3 order-xl-4 col-xl-3">
<button style="width: 49%" class="btn btn-lg btn-dark" id="doubt" #click="doubt()" :disabled="playing_animation">Dubito!</button>
<button style="width: 49%" class="btn btn-lg btn-dark">
Metti giù
</button>
</div>
</div>
The img that has id hidden_card is a card to the left of the red one that is made visible and slides to the right to cover that (it uses jQuery animate to manipulate the position). On top of stacked_card, which is the main red card that's displayed in the screenshots, there's another copy of it, that is flipped with jQuery and moved to the right to overlap hidden_uncovered_card. This is pretty much how the animations work. They all depend on using position: absolute and manipulating the positioning.
For some reason, the actual look I'm getting with the above code is this:
There is some space in between the three columns on the top and the one containing the red card back, and I don't understand where it is coming from.
Removing all the position: absolute seems to fix this, but of course, then all the animations that depend on it stop working.
Is there any way to fix this positioning without removing the position: absolute? It'd be a pain to have to rewrite the code for all the animations, as it's working perfectly on desktop.
Here's a static webpage that contains the markup. You can turn it to mobile view (the screenshots were taken as iPhone 6/7/8 mode) and see for yourself.
click
The actual app (a beta version, that is) can be found here, in case you wanted to see how the animations work. If you need any additional information, just let me know.
Bootstrap is using a 12 colums grid.
Check how you use them.
You have:
<div class="col order-1 order-xl-1 col-4 col-xl-2">The two button on the left<div>
<div class="reaction_box order-2 order-xl-2 col col-4 col-xl-2">the emojis</div>
<div class="col order-5 order-xl-3 col-12 col-xl-3">the red cards</div>
<div class="col col-4 order-3 order-xl-4 col-xl-3">the three button on the right</div>
You should clean that!!!
Example:
col followed by col-4 is the same as just col-4 where col-4 overrides col.
order-1 and order-xl-1 is redondant if there is no order-md-3 (for example)
Just order-1 is enought here.
For these 4 divs, make sure you use the 12 grid spaces correctly.
So about the col and col-* usage, for mobile size, you actually have 24 spaces used out of 12.
4 spaces
4 spaces
12 spaces
4 spaces
And whent the col-xl-* applies, you have 10 spaces used out of 12. Is that on purpose?
2 spaces
2 spaces
3 spaces
3 spaces
So here is what I suggest for a start:
<div class="col-3 col-xl-2 order-1">The two button on the left<div>
<div class="reaction_box col-4 col-xl-2 order-2">the emojis</div>
<div class="col-2 col-xl-3 order-3">the red cards</div>
<div class="col-3 order-4">the three button on the right</div>
which doesn't change the xl size at all, but produces this (iphone 6/7/8 mode):
That's a start.
So the trick is to have the classe in order... All the col-* from default to the bigger specific size... And then the order-* in order too. That make the markup readable.
;)
EDIT
To have the red cards looking like on another row :
<div class="col-4 col-xl-2 order-1">The two button on the left<div>
<div class="reaction_box col-4 col-xl-2 order-2">the emojis</div>
<div class="col-10 col-xl-3 order-4 order-xl-3 sm-translateUp">the red cards</div>
<div class="col-4 order-3 order-xl-4">the three button on the right</div>
Notice the order changed and that there is an additional .sm-translateUp class which would be:
#media screen and (max-width: 576px){
.sm-translateUp{
transform: translateY(-85px);
}
}
That makes:
Now that really looks like a hack... (LOL) But since that col is trapped inside its parent .row, that is all I think of for the moment.
So have that class defined inside all necessary #media rules for each bootstrap break points:
sm: >= 576px
md: >= 768px
lg: >= 992px
xl: >= 1200px
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