Faced a little problem following a tutorial
I was following "Creating a Blog Site" tutorial at this timestamp => https://youtu.be/Thudicbgqtg?t=4678
Github repo link => https://github.com/asmkhalid111/Blog-Site
I have upload an image of the problem output i was facing.
I have also added the github repo where you can see a portion of the code.
Though i think its a css problem of the class "three-columns"
The Problem: I need each lorem per column in the output. But its squeezing into one. I have used ai tools but failed...
But it still isn't working. What do you think is the problem? How do i solve it?
Help would be really appreciated...
6 Replies
I can't quite work out what you are doing from the screen shots.
Are you trying to get the "PopuluarArticles" to span the 3 columns of the parent?
If so, I think that you will need to create a "span-3" class similar to your "span-2" class and apply that to this element to tell it to span the full width of the parent other wise it will just fill one "cell" of the grid and have to squash all it's content into the available space.
Thank you for the reply, I will try it out.
Yes, i was trying to put every lorem into every column each. I dont want the three lorem squeezing into the first one.
If you want more to know about the problem i am facing, you can click the YouTube link, it's timestamped, It should take you the place where Kevin is using the same "three-column" tag to make each lorem using each column...
Thank you!
I have also updated the css code to have span-3,
It looks like this
.three-columns {
display: grid;
gap: 1rem;
@container (min-width: calc(3 * 25ch)) {
grid-template-columns: repeat(3, 1fr);
.span-2 {grid-column: span 2; }
.span-3 {grid-column: span 3; } } } But now, if i use it on the <PopularArticles class = "span-3"/> in index.astro, it gives the output in the image. It uses the first two column (or half of three columns) and leaves the third one...
Do the 3 items in the popularArticles element have any of their own styles/classes?
No... I am only using
---
const {class: className} = Astro.props;
---
<ul class:list={className}>
and <li> to create three lorem paragraph
Have youy used the inspector tool to see if any other styles are being applied.
It makes sense that they are being displayed in a column but I can't see why each li wouldn't expand across the whole width.