I would like to center images horizontally but I have some responsive issue
<div class="flex items-center justify-center bg-white rounded-tr-lg rounded-bl-lg h-24 p-2 text-center">
<img class="h-full mx-6" src="assets/react.png" alt="react logo" title="React">
<img class="h-full mx-6" src="assets/next.png" alt="next logo" title="Next">
<img class="h-full mx-6" src="assets/redux.png" alt="redux logo" title="Redux">
<img class="h-full mx-6" src="assets/tailwind.png" alt="tailwind logo" title="Tailwind">
<img class="h-full mx-6" src="assets/nestjs.png" alt="redux logo" title="Nest">
<img class="h-full mx-6" src="assets/typeorm.png" alt="tailwind logo" title="Typeorm">
</div>
The result:
Now if I change the dimension of the web browser:
How can I make it responsive ?
Related
I am new to Tailwind and I have the following code designed to establish a 'grid' row of 4 columns, with each column being 256x256 pixels in dimensions:
<div class="grid place-items-center">
**********
<div class="container mx-auto grid place-items-center space-y-2 lg:space-y-0 lg:gap-2 lg:grid lg:grid-cols-4">
<div class="w-full">
<img src="/public/img/image256.png" class="object-cover h-64 w-64" alt="image">
</div>
<div class="w-full">
<img src="/public/img/image256.png" class="object-cover h-64 w-64" alt="image">
</div>
<div class="w-full">
<img src="/public/img/image256.png" class="object-cover h-64 w-64" alt="image">
</div>
<div class="w-full">
<img src="/public/img/image256.png" class="object-cover h-64 w-64" alt="image">
</div>
</div>
**********
</div>
The result can be seen in this image. The 'blue squares' are the "image256.png" which are simple blue images sized to 256x256 pixels.
As can be seen in the attached image, the 'blue squares' appear fine, and seem to be correctly sized at 256x256 pixels. However I wish for the entire container to be centered in the display...which is why I added "class="grid place-items-center"" to the container. Obviously this was not working, so I changed my code to this:
<div class="grid place-items-center">
**********
<div class="container mx-auto grid place-items-center space-y-2 lg:space-y-0 lg:gap-2 lg:grid lg:grid-cols-4">
<div class="w-full sm:w-1/3 h-64 md:h-64 mb-4 sm:mb-0 px-2">
<img src="/public/img/image256.png" class="object-cover h-64 w-64" alt="image">
</div>
<div class="w-full sm:w-1/3 h-64 md:h-64 mb-4 sm:mb-0 px-2">
<img src="/public/img/image256.png" class="object-cover h-64 w-64" alt="image">
</div>
<div class="w-full sm:w-1/3 h-64 md:h-64 mb-4 sm:mb-0 px-2">
<img src="/public/img/image256.png" class="object-cover h-64 w-64" alt="image">
</div>
<div class="w-full sm:w-1/3 h-64 md:h-64 mb-4 sm:mb-0 px-2">
<img src="/public/img/image256.png" class="object-cover h-64 w-64" alt="image">
</div>
</div>
**********
</div>
The effect of this code can be seen here:
As can be seen...the images are centered however they have been 'cropped'. What I would like is to have all the images centered as in the second picture...however display at 'full size' (256x256 pixels) as in the first picture. My display is a laptop of at least 1280 pixels.
So basically I am trying to get a row of 4 columns that are 256x256 pixels, however the columns should be 'responsive' so as to scale down to fewer columns on smaller display screens.
I have been smashing my head against the wall for hours trying to figure this out...without success. If anybody can give me some advice I would greatly appreciate it. I thank you in advance.
Hello I'm confused on how should I pass collections/data to another component so I can display it in another component (in this case I'm showing discounts so it will be a section with popular discounts and another section showing latest discounts).
So i have this index.blade.php and i'm a bit confused on how to pass the data to x-discount-card component so I can access to $discount->title on the component. Right now I get "undefined variable $discount" so it seems i'm not accessing it right.
<x-layout>
<main>
#include('components.categories-row')
#include('discounts._best')
<section class="w-4/6 mx-auto my-8 font-bold flex flex-col items-center justify-center">
<h1 class="uppercase text-main-gray text-4xl bold self-start text-center mb-4 ">Últimos Descuentos</h1>
#if($discounts->count())
#foreach($discounts as $discount)
<x-discount-card :discount="$discount" />
#endforeach
#else
<p class="my-8 text-center">No hay descuentos disponibles. Por favor vuelva mas tarde. </p>
#endif
</section>
</main>
</x-layout>
discount-component
#props(['discount'])
<div
class="w-[20rem] h-auto bg-gradient-to-b from-card-light-gray to-card-main-gray p-6 rounded-2xl drop-shadow-xl md:w-[35rem] lg:w-[35rem] lg:w-[50rem] lg:h-auto mb-4">
<div class="flex-col items-center text-center justify-center h-full lg:grid lg:grid-cols-4 lg:grid-rows-4">
<a href="" class="flex justify-center lg:row-span-4 lg:-ml-10">
<img class="h-full " src="/images/pngwing.com.png" alt="" width="120" height="120">
</a>
<div
class="flex-col justify-center items-center text-center w-full lg:col-start-2 lg:col-span-full lg:row-start-1 lg:row-span-full lg:-ml-14">
<a href="/discount/1" class="lg:grid lg:row-start-2">
<h2 class="text-white font-bold text-lg md:text-2xl lg:my-2">{{ $discount->title }}</h2>
<div class="flex my-4 items-center text-center justify-center lg:my-2">
<p class="text-price-color font-bold mr-8 text-xl md:text-2xl">139,99€</p>
<p class="line-through text-white text-lg md:text-lg">149,99 (-10€)</p>
</div>
<p class="text-white my-8 text-sm md:text-lg lg:my-4">Bambas nike con 10€ de descuento y envio gratis.
Salen a
139,99€</p>
</a>
<div
class="flex-col items-center justify-center gap-2 lg:flex-row lg:inline-flex lg:col-start-2 lg:col-span-full lg:row-start-4 lg:row-end-5">
<a class="flex items-center justify-center my-2 " href="/user/1">
<img class="rounded-full mr-2" src="https://i.pravatar.cc/35"
alt="">
<p class="mr-4 text-white text-sm font-bold transition-transform hover:translate-x-0.5 md:text-lg">
JohnDoe</p>
</a>
<div class="flex items-center justify-center my-4 gap-4 lg:mx-4">
<div
class="border border-light-gray p-1 rounded-md transition-transform hover:-translate-y-0.5 cursor-pointer">
<img class="h-full" src="/images/heart.png" alt="" width="22" height="22">
</div>
<div
class="border border-light-gray p-1 rounded-md transition-transform hover:-translate-y-0.5 cursor-pointer">
<img class="h-full" src="/images/dislike.png" alt="" width="22" height="22">
</div>
<div
class="flex items-center border border-light-gray p-1 rounded-md transition-transform hover:-translate-y-0.5 cursor-pointer lg:px-4">
<img class="h-full" src="/images/comment.png" alt="" width="22" height="22">
<p class="text-light-gray ml-2">10</p>
</div>
</div>
<div class="flex justify-center lg:w-[250px] lg:-mr-14">
<button
class="flex my-4 items-center justify-center bg-gradient-to-b from-button-light-orange to-button-dark-orange p-2 rounded-md transition-transform hover:-translate-y-0.5 md:p-4 lg:w-full ">
<p class="text-light-gray mr-4 font-bold text-sm md:text-lg ">Ver Chollo</p>
<img src="/images/external-link.png" alt="" width="20" height="20">
</button>
</div>
</div>
</div>
</div>
<div
class="w-auto absolute top-5 left-5 flex-col items-center justify-center rounded-2xl bg-button-light-orange p-2 drop-shadow-lg md:flex-row md:inline-flex">
<p class="text-white text-xs uppercase font-bold mr-2 md:text-sm ">10%</p>
<p class="text-white text-xs uppercase font-bold md:text-sm ">descuento</p>
</div>
</div>
Also on the routes file i'm passing discounts but i'm a bit confused on how should I pass the data because right now i'm getting "undefined variable $discount error"
Route::get('/', function () {
return view('discounts.index', [
'discounts' => Discount::all(),
// ->where('premium','=',false)
'categories' => Category::all()
]);
})->name('home');
On the discounts._best component i'll display the discounts with more likes but this will be done in the future but I share the component too because maybe something there is what is causing the error.
<section class=" w-full text-center h-3/4 bg-light-gray flex flex-col items-center justify-center p-10">
<h1 class="uppercase text-main-gray mb-8 text-4xl font-bold">Descuentos Populares</h1>
<x-discount-card />
</section>
I searched on the Laravel Documentation about Component attributes but I dont know what i'm doing wrong and still confused.
i am using TailWind with blade template in laravel, how can i make those card like in the bootstrap, i mean every three items in the one column :
#section('content')
<div class="flex justify-center">
<div class="w-8/12 bg-white p-6 rounded-lg mt-10 ">
#forelse($products as $product)
<!-- Box -->
<div class="md:flex md:justify-center md:space-x-8 md:px-14">
<!-- box-1 -->
<div class="mt-16 py-4 px-4 bg-whit w-72 bg-white rounded-xl shadow-lg hover:shadow-xl transform hover:scale-110 transition duration-500 mx-auto md:mx-0">
<div class="w-sm">
<img class="w-64" src="{{asset('storage/images/products/'.$product->image)}}" alt="" />
<div class="mt-4 text-green-600 text-center">
<h1 class="text-xl font-bold">{{$product->name}}</h1>
<div class="mt-4 text-gray-600">{{$product->info}}</div>
<div class="mt-4 px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-300 text-green-800">{{$product->category->name}}</div>
<button class="mt-8 mb-4 py-2 px-14 rounded-full bg-green-600 text-white tracking-widest hover:bg-green-500 transition duration-200">MORE</button>
</div>
</div>
</div>
#empty
<h1 class="text-center">There is no Products</h1>
#endforelse
<div> {{$products->links()}}</div>
</div>
</div>
#endsection
Recreate the Bootstrap grid system in Tailwind CSS
<div class="grid grid-cols-12">Your column goes here</div>
You can follow this link for further details. https://shortbuzz.in/blog/shortbuzz.in/how-to-create-tailwind-css-grid-system-like-the-bootstrap-grid-system
Here's Peppermintology's comment in the form of an answer:
It sounds like you're looking for a 3 column grid. To do that in Tailwind CSS, use the grid classes like this:
<div class="grid grid-cols-3">
<!--- Generated cards go here --->
</div>
<div class="container mx-auto">
<div class="grid grid-cols-12 gap-1">
<div class="col-span-12 sm:col-span-12 md:col-span-3 lg:col-span-3 xl:col-span-3 2xl:col-span-3">Column</div>
<div class="col-span-12 sm:col-span-12 md:col-span-3 lg:col-span-3 xl:col-span-3 2xl:col-span-3">Column</div>
<div class="col-span-12 sm:col-span-12 md:col-span-3 lg:col-span-3 xl:col-span-3 2xl:col-span-3">Column</div>
</div>
</div>
there is a div with tag that by click on small image I change the src attribute and show it's the original size, but I don't know how to do in Alpine js?
<div>
<img id="main" />
</div>
/* small images from db */
<div>
foreach($images as $image){
<img id='small' src="images/.$image" />
}
</div>
in jquery :
$("#small").each(function(){
$(this).click(function(){
$("#main").attr('src', $(this).attr('src');)
})
})
})
but I don't know how to do in Alpine js?!
Something like this (using Laravel Blade syntax)?
<div x-data="{imageUrl: ''}">
<section>
<img id="main" :src="imageUrl" />
</section>
<hr />
<div>
#foreach($images as $image)
<img id='small' src="{{ images/.$image }}" #click="imageUrl = '{{ images/.$image }}'" />
#endforeach
</div>
</div>
Demonstrated in a pen here with some dummy data.
Check this codepen: Image Preview Demo. Hope this helps.
<div class="flex items-center justify-center text-gray-500 bg-blue-800 h-screen">
<div class="w-full">
<h3 class="mb-8 text-xl text-center text-white">Image Preview Demo</h3>
<div class="w-full max-w-2xl p-8 mx-auto bg-white rounded-lg">
<div class="" x-data="imageData()">
<div x-show="previewUrl == ''">
<p class="text-center uppercase text-bold">
<label for="thumbnail" class="cursor-pointer">
Upload a file
</label>
<input type="file" name="thumbnail" id="thumbnail" class="hidden" #change="updatePreview()">
</p>
</div>
<div x-show="previewUrl !== ''">
<img :src="previewUrl" alt="" class="rounded">
<div class="">
<button type="button" class="" #click="clearPreview()">change</button>
</div>
</div>
</div>
</div>
<div class="mt-2 text-center text-white">
<a class="w-32 mx-2" href="https://tailwindcss.com/">TailwindCSS</a>
<a class="w-32 mx-2" href="https://github.com/alpinejs/alpine">AlpineJS</a>
</div>
</div>
</div>
You can use x-ref on your main image and then $ref in your Alpine data function to set the src property of your main image. You could define your main image something like:
<img x-ref="mainImage" src="URL TO YOUR FIRST IMAGE" />
For each of your thumbnail images, you can do something like:
<img src="URL TO THUMBNAIL" x-on:click="pickPhoto(ARRAY INDEX)">
Your data function can then include something like this:
...
currentPhoto: 0,
photos: [
"URL TO FIRST IMAGE",
...,
"URL TO LAST IMAGE",
],
pickPhoto(index) {
this.currentPhoto = index;
this.$refs.mainImage.src = this.photos[this.currentPhoto];
},
...
I have uploaded a working example here:
https://tailwindcomponents.com/component/tailwind-css-with-alpine-js-photo-gallery
Note that this is deliberately designed to allow you to have different URLs from your thumbnails and main images, so the thumbnails can be intrinsically smaller, and load very quickly. If you are using the same images for both, you can simplify the code significantly. Each of your thumbnails could be done like this:
<img src="URL TO YOUR FIRST IMAGE" x-on:click="$refs.mainImage.src = 'URL TO YOUR FIRST IMAGE'">
With no need for the pickPhoto function or the photos array.
The downside of the simpler approach is that your page will take longer to load because you won't be using smaller images for your thumbnails.
In AlpineJs you could do something like this.
Not tested, just to make you an idea.
myimages()
{
return {
selected: '',
images: [
'images/1.png',
'images/2.png',
'images/3.png',
'images/4.png'
]
}
}
<div x-data="myimages()">
<div>
<img id="main" :src="selected"/>
</div>
<div>
<template x-for="(selimage, index) in images" :key="index">
<img class='small' :src="selimage" #click="selected = selimage"/>
</template>
</div>
</div>
you can for each both of them like this
<div x-data="{image:'0'}">
<div>
#foreach ($image_src as $key => $image)
<a href="">
<img x-show="image==='{{ $key++ }}'"
src="{{$image}}" alt="">
</a>
#endforeach
</div>
<div class=" overflow-x-scroll ">
#foreach ($image_src as $key=> $image)
<a class="mr-1" on- href="">
<img :class="{' border border-way-pink':image==='{{ $key }}'}"
#click.prevent="image='{{ $key++ }}'"
class="w-32 h-24 mr-5" src="{{$image}}" alt="">
</a>
#endforeach
</div>
</div>
I have made the following grid in Bootstrap 4:
<div class="container-fluid">
<div class="row padding">
<div id="workshop1" class="col-lg-6 nopadding">
<img src="images/Werkstatt/image_05.jpg" class="img-fluid nopadding" alt="">
</div>
<div class="col-lg-6">
<div class="row">
<div id="workshop2" class="col-lg-6 nopadding">
<img src="images/Werkstatt/image_06.jpg" class="img-fluid nopadding" alt="">
</div>
<div id="workshop3" class="col-lg-6 nopadding">
<img src="images/Werkstatt/image_08.jpg" class="img-fluid nopadding" alt="">
</div>
</div>
<div class="row">
<div id="workshop4" class="col-lg-6 nopadding">
<img src="images/Werkstatt/image_09.jpg" class="img-fluid nopadding" alt="">
</div>
<div id="workshop5" class="col-lg-6 nopadding">
<img src="images/Werkstatt/image_07.jpg" class="img-fluid nopadding" alt="">
</div>
</div>
</div>
</div> <!-- end of first row -->
<div class="row padding">
<div id="workshop6" class="col-lg-3 nopadding">
<img src="images/Werkstatt/image_01.jpg" class="img-fluid nopadding" alt="">
</div>
<div id="workshop7" class="col-lg-3 nopadding">
<img src="images/Werkstatt/image_04.jpg" class="img-fluid nopadding" alt="">
</div>
<div id="workshop8" class="col-lg-3 nopadding">
<img src="images/Werkstatt/image_02.jpg" class="img-fluid nopadding" alt="">
</div>
<div id="workshop9" class="col-lg-3 nopadding">
<img src="images/Werkstatt/image_03.jpg" class="img-fluid nopadding" alt="">
</div>
</div> <!-- end of second row -->
</div>
The css file looks like this:
.nopadding {
padding-left: 0;
padding-right: 0;
}
Now I have the problem, that there is a small white line between the right part of row 2 and row 3 in Safari and Chrome on my Mac. In Firefox everything looks fine:
Firefox
Chrome & Safari
Does anybody have an idea how fix this? All browsers are up to date.
Thanks in advance.
Regards
Lars
Try adding display: block; to your images or float: left;
Sometimes trying font-size: 0; or line-height: 0; works.