Desktop Landing Page using Tailwind CSS, HTML, CSS, Google Fonts......
Design comparison
Solution retrospective
I'm proud that I have completed the desktop design using Tailwind CSS. It took me 2-3 days just to complete this project not that this project is very difficult and all but, due to procrastination since this was the first time I was using tailwind and got stuck in most of the steps especially when it comes to making it responsive. I have only created the desktop design since it was difficult for me to use responsive feature using tailwind.
The thing I would do differently next time would be using tailwind for responsive site. I'll try to look into some responsive projects out there which uses tailwind css to learn responsiveness using tailwind
What challenges did you encounter, and how did you overcome them?I got some challenges which are:
- How to use custom tailwind-css : In this I just searched it and got the solution to declare the variable tailwind.config.js if you're using any framework or you can directly use it in HTML by enclosing it in script tag.
Well, there were many how's while creating this project due to my first time using tailwind, but it was merely CSS based like how I should write color: red
in tailwind and stuff like these.
I'm seeking help in making the project responsive using tailwind CSS.
I know how to use media query but there are a lot of problem on responsiveness I faced in tailwind. I have used lg-flex-row
on div which contain both the left and right cards in order to make them show like mobile design, but it doesn't have any effect, and I have tried a couple of more things.
If you guys could help that would be really wonderful and if you have any links or other things which could help that would also be great.
Waiting for your valuable feedback and suggestions.
Thanks!!!
Community feedback
- @markuslewinPosted 28 days ago
Hi!
The initial value of
flex-direction
isrow
, but you want it to becolumn
for small screens, androw
for larger screens:<div class="flex flex-col lg:flex-row ..."> <div class="card1 ..."></div> <div class="card2 ..."></div> </div>
With Tailwind, you generally want to take a mobile-first approach. Start by stacking blocks according to the mobile design, and use grid or flex to position them according to the desktop design. For example,
grid lg:grid-cols-2
creates a 1-column layout on mobile, which then turns into a 2-column layout on desktop.0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord