Help with; making divs stack below each other on small screens

HTML-CSS
1

Hi there,

I am new to coding and I am having trouble getting divs to stack below eachother when the screen gets smaller.
my CSS:(found and altered from this forum)

.flexcontainer {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(38ch, 1fr)); /*expected rebrace here why and how???*/
	grid-gap: 5px;
}
.flexitem {
	background-color: transparent;
	border-radius: 30px;
	padding: 10px;
	justify-content: flex-start;
	text-align: center;
}

my html:

<div class="flexcontainer">
			<div class="flexitem">
				<div class="box box1"><h2>The last 4 Events we posted 4 you:<br>Maaslandchapter Ronde van Limburg<br>Open House @ H-D American Lifestyle<br>Rock And Ride portugal<br>Show &amp; Shine @ RMC-Classics</h2></div>
			</div>
			<div class="flexitem">
				<a href="BikerEvent&Rally2019/BikerEvent&Rally2019.html"><div class="button button3"><img src="BikerEvent&Rally2019/index/EuroBikers2019.png" width="100%" alt="eurobikers lifestyle magazine 2019 logo, biker event and rally 2019 logo"><br>Click here.</div></a>
				<div class="fb-share-button" data-href="https://www.eurobikerslifestylemagazine.com" data-layout="button_count">  			</div>
			</div>
			<div class="flexitem">	
				<div class="box box1"><h2>The next 3 Events expected:<br>14TH Harley day Assenede<br>D-Day Normandy <br>Experience day @ American Lifestyle</h2></div>
			</div>
		</div>

somehow it does not work can anyone please help me I am stuck on this part for ages now.
still have multiple issues like this I hope to solve after I solve this one first.

2

It seems to work, it goes from a 3 to 2 to 1, column layout. Do you not want the 2 column layout in between the 3 and 1?

I don’t understand this comment, can you explain it?

/*expected rebrace here why and how???*/

It’s a CSS grid but you are calling the classes .flexcontainer/.flexitem. You are also using justify-content: flex-start, which is valid syntax and CSS Grid does understand it, but when using grid it should just be justify-content: start.

1 Like
3

You don’t wanna use any css framework here?

4

Why would you need a framework?

Especially when just starting out, I’d say to always learn the basics first. Or you can do both, but don’t skip learning the CSS just because of some framework.

1 Like
5

Dreamweaver tells me there is something wrong “expected rebrace in this collum”
the comment is noted for self to figure out what is wrong here and why?
on a big screen, it does not spread out on the entire page.
it does, however, sit below one and other on small screens (my cache was not cleared so I think at least when I started the topic still a noob, yet Ill keep trying and learning)

6

Still not even sure what a framework is after I know how the basics work Ill start working on frameworks I guess.
maybe you have a good page that explains frameworks, else Ill google it when I finish with the basics.

7

I don’t use Dreamweaver, I know they updated it to be more like an actual editor but I would still not use it. I’d suggest using VS Code and using the Live Server extension.

Anyway, are you sure the message isn’t expected rbrace in this column, if so, it may come from a lack of support for CSS grid by the code linter used to check for syntax errors.

As for the layout, it won’t fill the full with because of auto-fill you can use auto-fit instead.

grid-template-columns: repeat(auto-fit, minmax(38ch, 1fr));

1 Like
8

It works now thanks for the feedback