Help making mobile friendly codes?

[frogmilk]

hello! i've been looking for a tutorial on making mobile friendly codes for a while and have had little luck :-( i'm no coding genius but i can make simple codes (which is honestly all im looking to make) but i'd really like to make them mobile friendly. is there any threads someone could point me to or just the rundown of how a mobile friendly code is constructed?

thanks in advance ;-))

 

[VALEN T.]

i don't think i've seen any tutorials on it here but if you'd like, you can check out my thread. i'm no coding genius but i do try to make my codes as mobile friendly as possible

i'm sure there's many ways to go about this but here's a couple tips i'd give :>

• adding max-width: #px; instead of width: #px; on the outermost/parent container so that its width decreases as the screen size decreases (and nothing cuts off)
• using display: flex; flex-direction: row/column; (for positioning) and flex-wrap: wrap; (to allow containers to flow into a new line if the screen is too small) along with flex: #; (for container size dimensions without having to define its width and height separately)
• having three containers for hidden scrolls: width: #px; overflow: hidden; in the first one, width: 200%; overflow: auto; in the second, and width: 50%; in the last

 

[frogmilk]

i don't think i've seen any tutorials on it here but if you'd like, you can check out my thread. i'm no coding genius but i do try to make my codes as mobile friendly as possible

i'm sure there's many ways to go about this but here's a couple tips i'd give :>

• adding max-width: #px; instead of width: #px; on the outermost/parent container so that its width decreases as the screen size decreases (and nothing cuts off)
• using display: flex; flex-direction: row/column; (for positioning) and flex-wrap: wrap; (to allow containers to flow into a new line if the screen is too small) along with flex: #; (for container size dimensions without having to define its width and height separately)
• having three containers for hidden scrolls: width: #px; overflow: hidden; in the first one, width: 200%; overflow: auto; in the second, and width: 50%; in the last

thank u so much!!!