css help
- Started
- Last post
- 13 Responses
- trooperbill
Trying my first cssgrid but cant figure out how to get it to snap from 3 to 1 column on mobile. its currently showing 2 columns and has very small text making it unusable on mobile
anyone know a fix
- sted0
NET::ERR_CERT_COMMON_NAME_INVALI...
Subject: *.secure-secure.co.uk
Issuer: Go Daddy Secure Certificate Authority - G2that is some classy shite html you got here, maybe use meta viewport and some basic shit?
- sausages1
Haven't checked your link as I'm on a phone but it's likely grid-template-columns.
Build mobile first and change columns with media queries
- sted0
<meta name=”viewport” content=”width=device-width, initial-scale=1, shrink-to-fit=no”>
- monNom0
I think you are missing the declaration of '--auto-grid-min-size', so you minmax in the grid-template-columns would be 0
try adding this and fiddle with it as necessary.
:root{
--auto-grid-min-size: 10rem;
}
- monNom0
Sausages suggestion of media queries and breakpoints is probably a more flexible solution.
- prophetone0
Looking at it on laptop desktop so if issue on mobile device then maybe viewport scale issue... but I'm seeing 1 col in mobile widths otherwise, other issue is .card container are breaking free of .wrapper width - i.e. are like 320 plus l/r padding when should be responsive within .wrapper, so pushed off-screen, needs fix
- if it were me thought, i'd be setting media queries for my 3-4 preferred customg breakpoints... and make sure in mobile the wrapper is 100% widthprophetone
- have the elements within wrapper push away from edges with padding or margins, that way you can have 320 ads touch edges, full-width lines or row containersprophetone
- I'd also zero out the margins in the body tag so you're starting wall-to-wall on all edges, then set your preferred margin/padding on wrappers/containersprophetone
- shapesalad1
Breakpoints is the way to go.
Also these tools are great for setting up a basic grid structure:
https://layoutit.com
- ideaist0
Site looks great otherwise @trooperbill!
#QBNBallBreaking #QBNLove
; )
- dbloc0
looks like you got it working, right?
- ok_not_ok0
css noob here!
So is it possible to move a div mask without moving the image being masked?
here's my noob code:
#myMask{left:0;top:0;position:re... overflow:"hidden"}
#myImage{left:0;top:0;position:a...<div id="myMask">
<img src="pr0n.jpg" id="myImage">
</div>This masks the image but when I animate the mask the image moves with it.
Can anyone help a brother out?
- shapesalad1
Save yourself the headache, and build your site with this:
http://desech.comI have been using it for the past few weeks, absolutely amazing. If you are already familiar with html/css, this is a breeze.
It's basically a GUI for all that silly CSS/HTML you were fiddling with.
You can keep it vanilla and export plain html/css, then do your php stuff if that's the route you want to build your basic site - eg using php include to bring in the headers/menus etc and some simply if clauses for the content.
Or you can generate for react.
- This is really cool. have you heard of adobe dreamweavernb
- ^ Exactly. reminds of Dreamweaver. Great for a non programmer I guess.dbloc
- Nice Thanks!ok_not_ok
- https://www.youtube.…kingsteven
- It’s light and better than dinosaur dream weaver. It’s all based on css grid and is super nice to use.shapesalad
- So you have heard of dreamweavernb
- oh ffs, I came home early to dl this on my laptop and have a play and the fucking site's down. Why didn't I copy it from my work computer?!Nairn
- SimonFFM1
Use a media query and go to display: flex instead of display: grid for the mobile width:
@media (max-width: 768px) {
.boxes {
display: flex;
flex-direction: column;
gap: 2.11em;
}This is how I do it on my website.
- Not really a “correct” solution. Use grid-auto-flow https://developer.mo…nb
- Or, define your grid and then place items on it using one of many ways: https://www.sitepoin…nb
- But hey if your site works don’t change anything :)nb