Submitted 23 days ago

Blog Preview Card

tailwind-css

Adedotun Awolaja•30

@AAdedotun

A solution to the Blog preview card challenge

Preview Code

Solution retrospective

What challenges did you encounter, and how did you overcome them?

I only have a slight problem, I don't know why the width of the card is so small on small screens. I set the width to "w-1/2" and added px, but nothing worked. I've tried all things in tailwindcss classes but it's not working, I really need anyone who understands taiwindcss usage to help on this part. I'll drop a link to my github repo "https://github.com/AAdedotun/blog-preview-card.git"

Code

Please log in to post a comment

Community feedback

beowulf1958•1,890
@beowulf1958
Posted 22 days ago
Congratulations on completing this project. I like that you are using tailwindcss; I, too, am learning this framework. After taking a look at your project I can see that it looks too narrow on the mobile view. I tried various things but they didn't work, like using arbitrary values. However I was able to get it to work by altering the tailwind.config file. Did you know that, inaddition to colors, you could also extend the widths? This article explains the process. once you have altered the tailwind.config.js you must run: npx tailwindcss -i input.css -o output.css --watch this will update the stylesheets. I used 350px and it looked fine.
```
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './index.html'
  ],
  theme: {
    extend: {
      colors: {
        'brand-yellow': 'hsl(47, 88%, 63%)',
      },
      width: { 
        '350': '350px',
      }
    },
  },
  plugins: [],
}
```
You might have to adjust the padding. Try it out. Hope this helps

Join 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