I have added images on my page using tailwinds but on mobile, the image still appears to be bigger than I want.
My code below:
<script src="https://cdn.tailwindcss.com"></script>
<div class="max-w-md mx-auto bg-white hover:bg-gray-200 py-3 px-6 border-b border-gray-300 overflow-hidden md:max-w-2xl">
<div class="flex">
<div class="md:shrink-0">
<img class="h-40 w-full scale-75 object-cover md:h-full md:w-48" src="https://images.unsplash.com/photo-1488998427799-e3362cec87c3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" alt="Man looking at item at a store">
</div>
<div class="p-4">
<div class="uppercase tracking-wide text-sm text-indigo-500 font-light">Course</div>
How to Organize Your Time and Your Life
<p class="mt-2 ">By: Pete Mockaitis | How to Be Awesome at Your Job</p>
<span class="text-sm text-slate-500">134,768 Viewers. Released Jun 19, 2022</span>
</div>
</div>
</div>
What I get
What I want
I think the best way to make a website responsive is by using display: grid;>. I think this solves your problem:
<script src="https://cdn.tailwindcss.com"></script>
<div class="max-w-md mx-auto bg-white hover:bg-gray-200 py-3 px-6 border-b border-gray-300 overflow-hidden md:max-w-2xl grid grid-cols-3 gap-4">
<img class="h-30 w-full col-span-1 object-cover md:h-full md:w-48" src="https://images.unsplash.com/photo-1488998427799-e3362cec87c3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" alt="Man looking at item at a store">
<div class="col-span-2">
<div class="uppercase tracking-wide text-sm text-indigo-500 font-light">Course</div>
How to Organize Your Time and Your Life
<p class="mt-2 ">By: Pete Mockaitis | How to Be Awesome at Your Job</p>
<span class="text-sm text-slate-500">134,768 Viewers. Released Jun 19, 2022</span>
</div>
</div>
Related
In short, my problem is this:
I'm using TailWind on Laravel, I can't get the text inside the border to fit the whole div he's in, and it's weirdly centered this way where the amount of characters per line is limited
I tried many approaches like changing and trying different values of padding and margin but I was unsuccessful, it only makes the div bigger but the text is still awfully centered and limited.
the code portion is as follows:
<div class="mx-4">
<x-card class="p-10">
<div
class="flex flex-col items-center justify-center text-center"
>
<img
class="w-48 mr-6 mb-6"
src="{{$album->logo? asset('storage/'.$album->logo) : asset('/images/noalbum.png')}}"
alt=""
/>
<h3 class="text-2xl mb-2">{{$album->title}}</h3>
<div class="text-xl font-bold mb-4">{{$album->artist}}</div>
<x-insidetags :tagscsv="$album->tags"/>
<div class=" w-full mb-6 mt-5">
<h3 class="text-3xl font-bold">
About the album
</h3>
</div>
<div>
<div class="flex">
<div class="px-20 text-lg border border-black text-left">
<h3 class="font-bold">Track List :</h3>
#foreach($tracks as $track)
<p>- {{$track}}</p>
#endforeach
</div>
<div class="text-lg space-y-6 ml-10">
<div class="text-left py-10">
{{$album->description}}
</div>
<a
href="{{$album->website}}"
target="_blank"
class=" bg-black text-laravel mt-16 py-2 px-10 rounded-xl hover:opacity-80"
><i class="fa-solid fa-globe"></i> Visit RateYourMusic page</a
>
</div>
</div>
</div>
</div>
For refrence I'm trying to create something like this, but only with the name of the tracks for the moment
I figured it out, added flex 1 1 0% and flex 4 1 0% to the two divs
<div class=" text-lg shadow-xl text-left flex-1 h-fit p-5">
<h3 class="font-bold">Track List :</h3>
#foreach($tracks as $track)
<p>- {{$track}}</p>
#endforeach
</div>
<div class="text-lg ml-10 flex-[4_1_0%]">
<div class="text-left py-10">
{{$album->description}}
</div>
<a
href="{{$album->website}}"
target="_blank"
class=" bg-black text-laravel mt-16 py-2 px-10 rounded-xl hover:opacity-80"
><i class="fa-solid fa-globe"></i> Visit RateYourMusic page</a
>
</div>
I'm using tailwindcss inn reactjs which has div element divided into two parts, one is 9-12 and the second is 3-12. The 9-12 part is overlapping navbar one element and I'm able to click that element, but the 3-12 part overlaps 3 elements i.e. Experinece, Projet and Contact in navbar, which is not clickable.
Here's the code for navbar section:
<nav className="bg-gray-900 fixed w-full">
<div className="max-w-7xl mx-auto px-8">
<div className="flex items-center justify-between h-24">
<div className="w-full justify-between flex items-center">
<a className="flex-shrink-0" href="/">
<img
className="h-20 w-20 mt-4"
src={logo}
alt="Pradeep Anand"
/>
</a>
<div className="hidden md:block">
<div className="ml-10 flex items-baseline space-x-4">
<a
className="text-gray-300 hover:text-pink-600 dark:hover:text-white px-3 py-2 text-sm font-medium duration-300"
data-aos="fade-down"
data-aos-duration="1000"
data-aos-anchor-placement="top-center"
href="/#"
>
About
</a>
<a
className="text-gray-300 hover:text-pink-600 dark:hover:text-white px-3 py-2 text-sm font-medium duration-300"
data-aos="fade-down"
data-aos-delay="100"
data-aos-duration="1000"
data-aos-anchor-placement="top-center"
href="/#"
>
Experience
</a>
<a
className="text-gray-300 hover:text-pink-600 dark:hover:text-white px-3 py-2 text-sm font-medium duration-300"
data-aos="fade-down"
data-aos-delay="200"
data-aos-duration="1000"
data-aos-anchor-placement="top-center"
href="/#"
>
Project
</a>
<a
className="text-gray-300 hover:text-pink-600 dark:hover:text-white px-3 py-2 text-sm font-medium duration-300"
data-aos="fade-down"
data-aos-delay="300"
data-aos-duration="1000"
data-aos-anchor-placement="top-center"
href="/#"
>
Contact
</a>
</div>
</div>
</div>
<div className="block">
<div className="ml-4 flex items-center md:ml-6"></div>
</div>
<div className="-mr-2 flex md:hidden">
<button className="text-gray-800 dark:text-white hover:text-gray-300 inline-flex items-center justify-center p-2 rounded-md focus:outline-none">
<svg
width="20"
height="20"
fill="currentColor"
className="h-8 w-8"
viewBox="0 0 1792 1792"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M1664 1344v128q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45zm0-512v128q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45zm0-512v128q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45z"></path>
</svg>
</button>
</div>
</div>
</div>
</nav>
Here's the code for another component:
<div className="flex px-48 flex-wrap">
<div className="w-9/12 pt-32 pb-10">
<h2
className="text-2xl text-pink-600 intro"
data-aos="fade-up"
data-aos-delay="300"
data-aos-duration="1000"
data-aos-anchor-placement="top-center"
>
Hi, my name is
</h2>
<br />
<h1
className="text-8xl"
data-aos="fade-up"
data-aos-delay="500"
data-aos-duration="1000"
data-aos-anchor-placement="top-center"
>
Pradeep
<br />
Anand
</h1>
<div
className="w-16 h-2 bg-pink-800 mt-3"
data-aos="fade-right"
data-aos-delay="300"
data-aos-anchor-placement="top-bottom"
/>
<button
className="my-28 px-6 py-4 transition ease-in duration-200 uppercase rounded-md hover:bg-pink-800 hover:bg-opacity-30 hover:text-white border-2 border-pink-900 focus:outline-none"
data-aos="fade-up"
data-aos-delay="500"
data-aos-duration="1000"
data-aos-anchor-placement="top-bottom"
>
Get In Touch
</button>
</div>
<div
className="w-3/12 pt-48"
data-aos="fade-left"
data-aos-delay="800"
data-aos-duration="1000"
data-aos-anchor-placement="top-center"
>
<h3 className="text-sm text-pink-800 font-bold intro">
Introduction
</h3>
<h4 className="text-4xl py-4">
Software Developer by Profession. Web Dev by passion.
</h4>
<p>I'm a software engineer from India. I make things for web.</p>
</div>
</div>
please provide z-index to the nav bar to avoid this . since it has position fixed property
instead of the "..." in the end of the title in mobile view how do I get to break the line so that the entire title is visible.
i have tried applying span but it doesn't work either. please help.
<div class="bg-indigo-700 px-4 py-5 border-b rounded-t sm:px-6">
<h3 class="text-lg leading-6 font-medium text-white">
Choose the clip you want and download.
</h3>
</div>
<div class="bg-white shadow overflow-hidden sm:rounded-md">
<ul class="divide-y divide-gray-200">
{%for links in url_dict:%}
<li>
<a class="block hover:bg-gray-50">
<div class="px-4 py-4 sm:px-6">
<div class="flex items-center justify-between">
<!-------------------------------------------TITLE OF THE VIDEO--------------------------->
<h3 class="text-sm font-thin text-gray-700 truncate">
<a href='{{links}}'>{{url_dict[links][0]}}</a>
</h3>
<!----------------------------------------DOWNLOAD BUTTON---------------------------------->
<div class="ml-2 flex-shrink-0 flex">
<p class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 hover:bg-green-200 text-green-800 hover:text-green-700">
Download
</p>
</div>
</div>
<div class="mt-2 sm:flex sm:justify-between">
<div class="sm:flex">
<p class="flex items-center text-sm font-light text-gray-500">
length: {{url_dict[links][1]}}
</p>
</div>
</div>
</div>
</a>
</li>
{% endfor %}
</ul>
<button type="button" class="inline-flex items-center m-4 px-4 py-1.5 border border-transparent text-xs font-medium rounded shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
View more
</button>
</div>
You need to remove the truncate class from the <h3> element in the mobile view.
Use md: to indicate that truncate class is applicable only on medium and large screens
<!-------------------------------------------TITLE OF THE VIDEO--------------------------->
<h3 class="text-sm font-thin text-gray-700 md:truncate">
<a href='{{links}}'>{{url_dict[links][0]}}</a>
</h3>
I created a footer that I wanted to #include to other webpages. As such, I created #section('content'), then at the bottom #include('footer') then #endsection. Now this works only on my contact page which is showing the footer. But is not working on my home or blog pages. Below I will include the code I'm working on Laravel 7, using blade, tailwindcss, html/css. I tried multiple things like moving around #include, or #extends or #yeild but couldn't figure this out. Any help or direction would be appreciated.
When I inspect the homepage, for instance, the footer is being passed through but is mixed in with the navbar. When I inspect the contact page its placed where it should be at the bottom of the page. This has me stumped.
FOOTER
#extends('layout')
<footer>
<div class="flex justify-center bottom-0 bg-gray-800 h-18 pt-4 pb-4 static w-full">
<a href="https://paolotrulli.com" class="text-white hover:text-blue-800 m-2"><img class="h-10 w-10"
src="/images/global.svg"></a>
<a href="https://twitter.com/p_trulli" class="text-white hover:text-lue-800 m-2"><img class="h-10 w-10"
src="/images/twitter-black.svg"></a>
<a href="https://github.com/PT-83" class="text-white hover:text-blue-800 m-2"><img class="h-10 w-10"
src="/images/github.svg"></a>
<p class="text-white pt-4">Copyright 2020, Paolo Trulli</p>
</div>
</footer>
#yield('footer')
LAYOUT
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine#v2.0.1/dist/alpine.js" defer></script>
<title>#yield('title')</title>
</head>
<html>
<body>
<div class="absolute inset-x-0 top-0">
<nav x-data="{ open: false }" #keydown.window.escape="open = false" class="bg-gray-800">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center h-24">
<div class="flex items-center">
<div class="flex-shrink-0">
<img class="h-12 w-12" src="/images/startup.svg" alt="icon" />
</div>
<div class="hidden md:block">
<div class="ml-10 flex items-baseline">
<a href="/home"
class="px-4 py-2 rounded-md text-lg font-medium text-white bg-gray-900 focus:outline-none focus:text-white focus:bg-gray-700">Home</a>
<a href="/contact"
class="ml-4 px-3 py-2 rounded-md text-lg font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700">Contact</a>
<a href="/blog"
class="ml-4 px-3 py-2 rounded-md text-lg font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700">Blog</a>
<a href="po"
class="ml-4 px-3 py-2 rounded-md text-lg font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700"></a>
<a href="#"
class="ml-4 px-3 py-2 rounded-md text-lg font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700"></a>
</div>
</div>
</div>
<div class="-mr-2 flex md:hidden">
<button #click="open = !open"
class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:bg-gray-700 focus:text-white">
<svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
<path :class="{'hidden': open, 'inline-flex': !open }" class="inline-flex" stroke-linecap="round"
stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
<path :class="{'hidden': !open, 'inline-flex': open }" class="hidden" stroke-linecap="round"
stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
</div>
</div>
<div :class="{'block': open, 'hidden': !open}" class="hidden md:hidden">
<div class="px-2 pt-2 pb-3 sm:px-3">
<a href="/home"
class="block px-3 py-2 rounded-md text-base font-medium text-white bg-gray-900 focus:outline-none focus:text-white focus:bg-gray-700">Home</a>
<a href="/contact"
class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700">Contact</a>
<a href="/blog"
class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700">Blog</a>
<a href="#"
class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700"></a>
<a href="#"
class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700"></a>
</div>
<div class="pt-4 pb-3 border-t border-gray-700">
<div class="flex items-center px-5">
<div class="flex-shrink-0">
<img class="h-10 w-10 rounded-full" src="/images/0.jpeg" alt="My Picture" />
</div>
<div class="ml-3">
<div class="text-base font-medium leading-none text-white">Paolo Trulli</div>
<div class="mt-1 text-sm font-medium leading-none text-gray-400">paolo.g.trulli#gmail.com</div>
</div>
</div>
</div>
</nav>
#yield('content')
</body>
</html>
CONTACT PAGE
#extends('layout')
#section('title', 'Contact')
#section('content')
<div class="bg-gray-700 text-center text-lg full-screen pt-6">
<h1 class="pb-8 text-white text-xl">Contact</h1>
<form action="/contact" method="POST">
<div class="justify-center relative">
<label>
<input class="border-2 border-gray-800 border-black h-10 w-1/4" type='text' placeholder="Name"
autocomplete="off">
</label>
</div>
<div class="justify-center pt-4">
<label>
<input class="border-2 border-gray-800 h-10 w-1/4" type="text" placeholder="Email" autocomplete="off">
</label>
</div>
<div class="justify-center pt-4">
<label>
<input class="border-2 border-gray-800 h-20 w-1/4" type="text" placeholder="Type Text Here"
autocomplete="off">
</label>
</div>
#csrf
<div class="text-center pt-6">
<button
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 border border-blue-700 rounded justify-center">
Submit</button>
<h3 class="pt-6 text-white">I will not SPAM you and your data is Safe!</h3>
<div class="bg-cover content-center flex justify-center min-h-50">
<img src="/images/contact.svg" alt="background image">
</div>
</div>
</form>
#include('footer')
#endsection
HOME PAGE
#extends('layout')
#section('title', 'Home')
#section('content')
<main>
<div class="bg-gray-700 text-center text-gray-200 tracking-wider leading-loose h-full">
<h1 class="pt-6 pb-6 text-lg font-semibold">
A Website Built and Designed By Me!
</h1>
<img class="container-sm mx-auto border-2 border-gray-800" src="/images/0.jpeg">
<p class="pt-6 text-base capitalize font-semibold">
Who am I you ask?
</p>
<div class="inline-flex">
<p class="flex-1"></p>
<p class="flex-1 text-center pt-3 text-justify">
I am a father of two, a husband of one, and someone who loves to build things. I tend to find
something I enjoy
get obsessed with it, and ditch if for something new. Rinsing and Repeating the process. My latest
obsession, in
case you didn't notice, creating this website by programming it myself. I have been diving deep into the
world
of coding, although it takes time to learn, and the many frustrating issues along the way, I can say for
certain
I love to learn and build.
</p>
<p class="flex-1"></p>
</div>
<p class="text-center pt-6 capitalize font-semibold">
So what will this site be or provide?</p>
<div class="inline-flex pt-3">
<p class="flex-1"></p>
<p class="flex-1 text-justify">
I plan to blog about
various topics that interest me. Topics will be random, interesting, and makes me curious. Also, I will
use
this site to showcase a portfolio of work I complete, beginning with this website and adding projects as
I
go.
</p>
<p class="flex-1"></p>
</div>
</div>
</div>
</main>
#include('footer')
#endsection
Lastly BLOG PAGE
#extends('layout')
#section('title', 'Blog')
#section('content')
<main>
<div class="bg-gray-700 text-center text-gray-700 h-screen text-lg">
<h3 class='text-gray-300 pt-6 text capitalize'>A place where I create posts on random things that interest me
</h3>
<div class="pt-6">
<form action="/blog" method="post">
</div>
<label class=""></label>
<input type="text" name="title" autocomplete="off">
#csrf
<div class="text-center pt-6">
<button
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 border border-blue-700 rounded justify-center">
Add Blog Post</button>
</div>
</form>
<p style="color: red">#error('title') {{ $message }} #enderror</p>
<ul>
#forelse ($blogs as $blog)
<li>{{ $blog->title }}</li>
#empty
<li>
<h3 class="text-center pt-4 text-red-500">No Blog Posts Yet</h3>
</li>
#endforelse
</ul>
</div>
</div>
</main>
#include('footer')
#endsection
Simply, improper html tags. Lesson learned to ensure open and close tags are equal. Because I was short </div> tags my code was suffering and not working as it should.
Credit goes to #kerbholz
I have a web app I'm building out in Rails 5, Ruby 2.4. Im using Tailwindcss as my design framework.
I have a hero image (below) in which I'm using a tailwind like alert as a banner to advertise a new web store for merch. It sits exactly where I want it to im the hero, however on page scroll it floats over my fixed nav, and in mobile view with the nav menu dropped down it floats overtop of it blocking the nav view.
Im not too sure how to fix this so it sits behind the nav and dosnt obstruct the nav functionality.
link to site for viewing
Loadlead website
my hero image code:
<div class="flex flex-wrap sm:block bg-transparent" id="header-hero">
<div class="container mx-auto">
/* BANNER THATS CAUSING ISSUES */
<div class="bg-transparent text-center py-4 lg:px-4">
<div class="p-2 bg-load-lead-green items-center text-white leading-none lg:rounded-full flex lg:inline-flex opacity-75 border-b-4 border-black md:mt-8">
<span class="flex rounded-full bg-blue uppercase px-2 py-1 text-xs font-bold mr-3 border-b-2 border-black">New</span>
<span class="font-semibold mr-2 text-left flex-auto">Pre-order LoadLead gear in our new web store</span>
<svg class="fill-current opacity-75 h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M12.95 10.707l.707-.707L8 4.343 6.586 5.757 10.828 10l-4.242 4.243L8 15.657l4.95-4.95z"/></svg>
</div>
</div>
/* END BANNER */
<div class="flex py-8 px-4 sm:px-8">
<div class="w-full py-8">
<p class="text-4xl text-black font-sans font-bold mb-1">Trucking. Simplified</p>
<p class="text-xl text-black sm:text-lg mb-6 font-sans font-semibold">Minimize your trucks downtime & keep your loads moving!</p>
<a class="bg-blue text-white no-underline uppercase text-sm px-4 py-2 rounded-full font-bold hover:bg-blue border border-b-4 border-black hover:border-transparent cursor-not-allowed" href="/#">Take a Tour</a>
<a class="bg-load-lead-green text-white no-underline uppercase text-sm px-4 py-2 rounded-full font-bold hover:bg-load-lead-green border border-b-4 border-black hover:border-transparent cursor-not-allowed" href="/#">Join the Community</a>
</div>
</div>
</div>
</div>
Any help here would be greatly appreciated!
You need to have your hero as relative and the banner as absolute positions.