any one experts is responsiveness here and willing to help?
hi guys i have created a website that has a grid layout when i try its responsiveness to shrink the screen it works until it get to 954 width and it stop there the responsiveness, what is the problem with this?
7 Replies
and in that particular width when i tried to remove the grid its very resposnive it adjust to different screen
anyone there that kind? willing to help? will be so much appreciated
can you please post your relevant grid code into a https://codepen.io ; no one will be able to help without knowing what properties are already declared on your grid 🙏🏻
CodePen
An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications.
https://codepen.io/justine1607/pen/wvLBQMP here thank you so muchh
your 11 gaps of 51px in a 12 column grid aretaking up a great deal of the available space and shrinking the fractional units to nothing. also your content inside has no clamp or anything on the text to make it also shrink . from the look of some of your classes, the javascript logic is ending up as the class names instead of the class names you intended
Is there a reason youre using 12 columns and with a gap of 51px? it looks to me as though you could accomplish what youre trying to accomplish with two columns
grid-template-columns: 1fr 2fr
yeah i think so that the 12 columns is the problem here now i change it to 6 columns and resize the margin in the grid and its better now
take a look the new one
pls, give me an opiion if that good or bad?
Why do you have 6 columns when you only need two ?
And what is the gap of 51px supposed to be doing ? I can’t think of any reason anyone would need 11 gaps of 51px each .
I’m very confused by your implementation. If I were trying to accomplish what I think you’re trying to accomplish I would use a grid-template-column: 1fr 2fr; gap: 1rem; give the logo a grid column: 1/-1; then everything else is set on the right column already. Let’s get the cols set up and then we can examine the rows.
ok thank you