how to hide or make that overflow hidden
THE MOTIVATION FROM OUR CUSTOMERS
"Happiness is a by-product of an effort to make someone else happy."
<div class="sm:grid sm:grid-cols-3 gap-4 mt-5">
<div class="mt-5">
<!-- <img src="image/review.png" alt="" class=""> -->
<div class="bg-slate-200 w-full max-h-48 sm:max-h-64 p-4 grid grid-rows-2">
<div class="flex gap-5">
<div class="">
<div class="bg-black h-16 w-16"></div>
</div>
<div class="-space-y-1">
<p class="text-lg font-bold">Adish Dahal</p>
<p class="text-xl font-bold">
<iconify-icon icon="emojione:star"></iconify-icon>
<iconify-icon icon="emojione:star"></iconify-icon>
<iconify-icon icon="emojione:star"></iconify-icon>
<iconify-icon icon="emojione:star"></iconify-icon>
<iconify-icon icon="emojione:star"></iconify-icon>
</p>
<p class="text-sm font-light">2078-05-06</p>
</div>
</div>
<div class="">
<p class="text-justify">
In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content read more
</p>
</div>
</div>
</div>
</div>
</div>
You can hide/make the overflow hidden by applying the overflow-hidden utility.
The tailwind documentation got all the possible options with many examples; you should look at docs.
Tailwind-play.
It's not completely clear what you mean by saying you want it to be responsive, but if you wish for the text's container to change its height depending on your text's length, you need to get rid of max-h-48 sm:max-h-64 utilities.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<html>
</html>
<body>
<div class="sm:grid sm:grid-cols-3 gap-4 mt-5">
<div class="mt-5">
<!-- <img src="image/review.png" alt="" class=""> -->
<div class="bg-slate-200 w-full min-h-48 p-4">
<div class="flex gap-5">
<div class="">
<div class="bg-black h-16 w-16"></div>
</div>
<div class="h-fit">
<p class="text-lg font-bold">Adish Dahal</p>
<p class="text-xl font-bold">
<iconify-icon icon="emojione:star"></iconify-icon>
<iconify-icon icon="emojione:star"></iconify-icon>
<iconify-icon icon="emojione:star"></iconify-icon>
<iconify-icon icon="emojione:star"></iconify-icon>
<iconify-icon icon="emojione:star"></iconify-icon>
</p>
<p class="text-sm font-light">2078-05-06</p>
</div>
</div>
<div class="">
<p class="text-justify">
In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content read more
</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
changed max-h-48 to min-h-48, bcs if max the container will not resize to content fit. you can also use min-h-fit
Related
I have made a set of three cards that will display information at the top of the three cards is an image, I am using JSX and Tailwind but can not seem to get the image to center, it sits off to the left.
How do I make it so the image is centered properly what am I missing? staring at it is not helping !
This is my code TIA !
<section>
<div>
<h3 className='text-3xl py-10 text-center'>About Me </h3>
<p className='text-center text-md py-2 leading-8 text-gray-800'>
Blah blah blah <span className="text-teal-500 text-md">Tech</span> blah
</p>
</div>
<div className='lg:flex gap-10 '>
<div className='text-center shadow-lg p-10 rounded-xl my-10'>
<Image src={design} width={100} height={100} />
<h3 className='text-lg font-medium pt-8 pb-2'>Beautiful designs</h3>
<p className='py-2'>
Creating elegant designs suited for your needs
</p>
<h4 className='py-4 text-teal-600'>Design tools I use</h4>
<p className='text-gray-800 py-1'>photoshop</p>
<p className='text-gray-800 py-1'>Aftereffects</p>
<p className='text-gray-800 py-1'>Blender</p>
<p className='text-gray-800 py-1'>Figma</p>
</div>
<div className='text-center shadow-lg p-10 rounded-xl my-10'>
<Image src={design} width={100} height={100} />
<h3 className='text-lg font-medium pt-8 pb-2'>Beautiful designs</h3>
<p className='py-2'>
Creating elegant designs suited for your needs
</p>
<h4 className='py-4 text-teal-600'>Design tools I use</h4>
<p className='text-gray-800 py-1'>photoshop</p>
<p className='text-gray-800 py-1'>Aftereffects</p>
<p className='text-gray-800 py-1'>Blender</p>
<p className='text-gray-800 py-1'>Figma</p>
</div>
<div className='text-center shadow-lg p-10 rounded-xl my-10 '>
<Image src={design} width={100} height={100} />
<h3 className='text-lg font-medium pt-8 pb-2'>Beautiful designs</h3>
<p className='py-2'>
Creating elegant designs suited for your needs
</p>
<h4 className='py-4 text-teal-600'>Design tools I use</h4>
<p className='text-gray-800 py-1'>photoshop</p>
<p className='text-gray-800 py-1'>Aftereffects</p>
<p className='text-gray-800 py-1'>Blender</p>
<p className='text-gray-800 py-1'>Figma</p>
</div>
</div>
</section>
Problem: You are not assigning any styling that would center the image.
Solution: Use Flexbox or Grid to structure elements. (center the image in your case)
Example:
<div className='text-center shadow-lg p-10 rounded-xl my-10 flex flex-col items-center'>
<Image src={design} width={100} height={100} />
<h3 className='text-lg font-medium pt-8 pb-2'>Beautiful designs</h3>
<p className='py-2'>
Creating elegant designs suited for your needs
</p>
<h4 className='py-4 text-teal-600'>Design tools I use</h4>
<p className='text-gray-800 py-1'>photoshop</p>
<p className='text-gray-800 py-1'>Aftereffects</p>
<p className='text-gray-800 py-1'>Blender</p>
<p className='text-gray-800 py-1'>Figma</p>
</div>
So after changing the position of a div using transform translate, the parent div does not resize accordingly to fill the white space. Any advice would be appreciated.
<script src="https://cdn.tailwindcss.com"></script>
<p>
Distance from top
</p>
<section>
<div class="container mx-auto my-8">
<div class="flex flex-col gap-4 px-4 font-bold">
<div class=" bg-green-200 p-10 aspect-square w-7/12">
<p>Lorum ipsum !</p>
</div>
<div class="-translate-y-16 self-end bg-slate-200 p-10 aspect-square w-7/12">
<p>Lorum ipsum !</p>
</div>
<div class="-translate-y-32 bg-green-200 p-10 aspect-square w-7/12">
<p>Lorum ipsum !</p>
</div>
</div>
</div>
</section>
<p>
Distance from bottom
</p>
❌ I tried the translate way but not work,
❌ I tried the position way and still doesn't work.
✅ but with the negative margin trick, is working!
-mt-16, -mt-32 class solve it,
mt means margin-top in plain CSS
and if you add - prefix, means negative value.
and that it, solved!
<script src="https://cdn.tailwindcss.com"></script>
<p>
Distance from top
</p>
<section>
<div class="container mx-auto my-8">
<div class="flex flex-col gap-4 px-4 font-bold">
<div class="bg-green-200 p-10 aspect-square w-7/12">
<p>Lorum ipsum !</p>
</div>
<div class="-mt-16 self-end bg-slate-200 p-10 aspect-square w-7/12">
<p>Lorum ipsum !</p>
</div>
<div class="-mt-32 bg-green-200 p-10 aspect-square w-7/12">
<p>Lorum ipsum !</p>
</div>
</div>
</div>
</section>
<p>
Distance from bottom
</p>
if there is a space between the text and content is because of the container class, but is solved. (see Distance from bottom text in your example and in my mine, huge improvement)
I have the following bootstrap jumbotron, but its not working as desired.
div class="jumbotron" style="color:#ffffff">
<div>
<div style="display:inline-block;">
<img src="~/Content/Images/3.png" height="10%" width="10%" />
</div>
<div style="display:inline-block;">
<h1 class="display-3">Welcome to My Site!</h1>
</div>
</div>
<div>
<p class="lead">
● brag about something good
</br>
● brag about another good thing
</br>
● make same vague promise
</p>
</div>
<hr class="my-4">
<p>
insert some fake aspirations and use the phrase 'we strive to'
</p>
<p class="lead">
<a class="btn btn-primary btn-lg" href="#" role="button">Visit</a>
</p>
</div>
I want it to look like this-ish
Help, please.
Here is an example which may help you:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="jumbotron bg-dark text-white">
<div class="media">
<img class="mr-3" src="http://rs882.pbsrc.com/albums/ac23/Silllyghostfreak/My%20Fakegees/Seelzplz.png~c200" height=64>
<div class="media-body">
<h5 class="mt-0">Media heading</h5>
<p class="lead mb-0">● brag about something good</p>
<p class="lead mb-0">● brag about another good thing</p>
<p class="lead mb-0">● make same vague promise</p>
</div>
</div>
</div>
I am trying to learn Bulma and I want to show a simple page with this layout:
<header>
<hero>
<section>
<footer>
I don't understand why they overlap with each other instead of being clearly one below the other.
There is a dummy container that is obviously misplaced and hidden by the header.
The overlapping is also obvious by the search bar that is both over part of the footer and the hero.
https://codepen.io/anon/pen/bLgOWb
<nav class="navbar is-primary is-fixed-top has-text-white">
<div class="container">
<div class="navbar-brand">
<img id="logo" alt="DUB Logo" src="http://code.dlang.org/images/dub-header.png"/>
</div>
<div class="navbar-menu">
<div class="navbar-start">
<div id="navItem" class="navbar-item">Primo</div>
</div>
</div>
</div>
</nav>
<section class="section">
<div class="container dummy">
</div>
</section>
<div class="hero ">
<div class="container has-text-centered is-size-1">
<h1 class="title"> Explore and use libraries and software</h1>
</div>
</div>
<div id="search" class="container">
<div class="columns searchBlock ">
<div class="column is-paddingless">
<form>
<input class="input searchInput" type="text" placeholder="Search">
</form>
</div>
<div class='column is-3 is-paddingless'>
</div>
<div class='column is-2 is-paddingless'>
<a class='button is-primary searchButton'>Search</a>
</div>
</div>
</div>
<footer class="footer">
<div class="container is-text-centered">
<p> Footer </p>
</div>
</footer>
<script src="old.js"></script>
.hero-body is missing
<div class="hero">
<div class="hero-body">
<div class="container has-text-centered">
<h1 class="title"> Explore and use libraries and software </h1>
</div>
</div>
</div>
Bulma - Hero
I think problem with column . change column margin follow this
.columns {
marign:0;
}
I've got a single page of my website which I'm struggling to make responsive. It looks fine on normal screens but is very small and doesn't fill the whole screen on an iPhone. I've narrowed the issue down to this block of code:
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="post-preview">
<h2 class="post-title">Blah</h2>
<p>Blah</p>
<hr>
</div>
</div>
<div class="col-md-6">
<div class="post-preview">
<h2 class="post-title">Blah</h2>
<p>Blah</p>
<hr>
</div>
</div>
<div class="col-md-5 col-md-offset-1">
<div class="post-preview">
<h2>Blah</h2>
<p class="post-title">Blog Post</p>
<p class="post-title">Blog Post</p>
<p class="post-title">Blog Post</p>
<hr>
</div>
</div>
</div>
</div>
I think I'm not using the grid system properly but would welcome any input!
My source is here: http://pastebin.com/JC6XzTMT and I'm using this as a base: http://ironsummitmedia.github.io/startbootstrap-clean-blog/
Thanks
Make sure the following meta tag is the head of your page:
<meta name="viewport" content="width=device-width, initial-scale=1.0">