I am trying to position an image over image. Basically I want the image to fit correctly at the chest area position on the hoodie, but it's not coming out properly. How do I do it in a clean way that is responsive as well?
My code:
<div className="basis-1/2">
<div className="max-w-lg container mx-auto">
<img className="w-full" src={`${router.basePath}/assets/images/Hoodie black label.jpg`} alt="Empty Hoodie"/>
<div className="place-items-center">
<img className="w-1/6 absolute top-1/3 right 1/4 place-items-center h-40 w-40" src={urlvalue} alt="Picked NFT to Print"/>
</div>
</div>
</div>
Thanks in advance!
You can overlay an image over another like this,
<script src="https://cdn.tailwindcss.com"></script>
<div class="relative mix-blend-lighten">
<img src="https://m.media-amazon.com/images/I/61ktWbf0z4L._UX679_.jpg" alt="BannerImage" class="absolute h-[] w-full object-cover object-right " />
<img src="http://codeskulptor-demos.commondatastorage.googleapis.com/GalaxyInvaders/back04.jpg" alt="BannerImage" class="absolute h-[20vh] w-[30vh] object-cover object-right mx-44 mt-44 sm:mx-72 sm:mt-72" />
</div>
But since both the image had absolute position, then you have to add different margins for the upper image for each screen breakpoints, so that it lies always on chest area of hoodie image.
Related
So, I have this code:
<div className="bg-black font-serif pl-20 grid text-white !scroll-smooth">
<Head>
<title>MinimDays | Ultimate minimalism</title>
<link rel="icon" href="/plant.ico" className="fill-white" />
</Head>
<section id="home">
<div className="flex">
<span className="pt-72 mr-[400px]">
<h1 className="text-3xl ">MinimDays | Ultimate minimalism</h1>
<Link href="#about"><a className="text-lg hover:text-gray-400">About</a></Link> |
<Link href="#contactus"><a className="text-lg hover:text-gray-400"> Contact Us</a></Link>
</span>
<picture>
<img src="/photo.jpg" alt="photo" className="h-[480px] w-[320px] mt-[80px] rounded-xl border-white border-4"/>
</picture>
</div>
</section>
<section id="about" className="mt-20">
<h1 className="text-3xl mb-5">About Us</h1>
<hr className="mb-5"/>
<p className="text-lg">I like the idea of digital minimalism, but apps that satisfy this category are usually paid <br /> or have a free tier which is highly limited, so I said SCREW IT, <br /> and created my own! </p>
</section>
</div>
And the scroll animation does not work. I tried on Firefox Developer Edition and Chrome, but nothing seems to help. Any suggestions?
You need to add smooth-scroll to the html element. So add this to your main css file:
html {
scroll-behavior: smooth;
}
I managed to get smooth scrolling working with your example code with the above change, in an HTML version that I put together.
I haven't tested it in Next.js, but note the <Link /> is for navigation between pages. Not sure if that will cause problems for links within the page.
MDN Smooth Scroll documentation:
When this property is specified on the root element, it applies to the viewport instead. This property specified on the body element will not propagate to the viewport.
https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior
Hi All,
I am looking for a responsive way using TailwindCSS to bind the outer card component to the viewport.
I've tried w-screen and h-screen, however they don't ensure that the card component remains in view across differing window sizes.
I want to get rid of the white space around the card.
Any suggestions are much appreciated.
Thanks,
Brandon
import BlogPost from './BlogPost';
const CardDisplay = () => {
return (
<div class="object-cover w-screen relative bg-white rounded-xl shadow-md overscroll-contain overflow-hidden ">
<div class="md:flex">
<div class="lg:shrink-0">
<img class="h-full w-full object-cover md:h-full md:w-64" src="/img/store.jpg" alt="Man looking at item at a store"></img>
</div>
<div class="p-32">
<div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">Case study</div>
<BlogPost/>
<BlogPost/>
<BlogPost/>
</div>
</div>
</div>
)
}
export default CardDisplay;
I want to let rows intercalate each other, as represented below:
The problem is at the moment I can't intercalate the rows, so I end up having a layout that looks like this:
Or a more real example of what I have:
I tried a lot of ways, including Grid Auto Flow, Inline Grid and also making the child Inline Block but nothing seem to work. From what I inspected each column is as big in height as the one in right, which I don't want.
I can't think of a solution to achieve the desired output using grid layout.
A possible way to do it would be using w-1/2 to set the width of both columns and to absolutely position the second column at the top right corner of the parent. Please check the code snippet below for example.
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet">
<div class="relative h-full w-full">
<div class="w-1/2">
<div class="w-full h-20 bg-blue-400"></div>
<div class="w-full h-10 bg-yellow-400"></div>
<div class="w-full h-36 bg-red-400"></div>
</div>
<div class="absolute right-0 top-0 w-1/2">
<div class="w-full h-40 bg-green-400"></div>
<div class="w-full h-36 bg-indigo-400"></div>
</div>
</div>
How can i set thumbnails container width? I have 8 pictures and more in the slider. But in the thumbnail panel i need to show only 3.
<div class="fotorama" data-nav="thumbs">
<img src="http://s.fotorama.io/1.jpg"/>
<img src="http://s.fotorama.io/2.jpg"/>
<img src="http://s.fotorama.io/3.jpg"/>
<img src="http://s.fotorama.io/4.jpg"/>
<img src="http://s.fotorama.io/1.jpg"/>
<img src="http://s.fotorama.io/2.jpg"/>
<img src="http://s.fotorama.io/3.jpg"/>
<img src="http://s.fotorama.io/4.jpg"/>
</div>
jsFiddle
Have a look at the following:
"navwidth"
Navigation container width in pixels or percents.
Found at: http://fotorama.io/customize/options/
I have started using the Foundation 3 from zurb but my slider has slides with text on the left hand side and an image on the right (instead of just an image and a label on top of it).
When I decrease the size of the browser window it all fits except that the height of the slider.
What we need is to make the slider higher when on a small browser (it needs to be the same slider - not an alternative).
I know there's the fluid option in fluid slider and I suspect that if I change it, it will be enough to solve this problem.
How do I achieve that?
The following is my slider HTML code:
<div class="row">
<div class="twelve columns">
<div id="slider">
<!-- *** This is the slider that needs to fit smaller browsers ***-->
<div class="row" style="background-color:White;">
<div class="six columns">
<h2>Title</h2>
<div class="summary">
This is the summary is the summary is the summary is the summary is the summary is the summary is the summary.
Learn more
</div>
<div class="some-thumbnails">
<img src="http://placehold.it/100x100&text=[thumbnail]" />
<img src="http://placehold.it/100x100&text=[thumbnail]" />
<img src="http://placehold.it/100x100&text=[thumbnail]" />
</div>
</div>
<div class="six columns">
<img src="http://placehold.it/550x250&text=[img 1]" />
</div>
</div>
<img src="http://placehold.it/1000x400&text=[img 1]" />
</div>
</div>
<hr />
The orbit is controlled by an image generated by some plugin used by the orbit plugin. What I did was to change the plugin to get the height of the left and right part of the highest slide (when changed to phone view) and then set the data-src to "holder.js/[width]x[height]" and call the Holder.run() method.