Hello everyone, I just finished my survey page and I would love some feedback. I’m very new to coding so I have a few questions:
I cannot figure out how to make this thing show up on my Galaxy S8 correctly. I thought all I had to use was <meta name=“viewport” content=“width=device-width, initial-scale=1.0” under a head tag but that didn’t seem to work. I’m guessing it’s more complicated than I thought. Do I have to go to each element and do a max-width: value?
I wanted to make my own snowmen and snowflakes, but after looking into it, it seemed like an insane amount of work. I didn’t want to put weeks into learning how to do that just yet. Hopefully, I can make my own snowflake design in the future. So I just borrowed the snowflake CSS from a free website. However, I noticed they all look black on the PC. On my phone, some of them are actually colorful and look really nice. Why is this?
looks nice bro i would say try and get the checkboxes and radios to align up, also as for your snowflakes you have the code in the wrong section you need to move it all from the css section to the html and they will turn white.
Okay, I just fixed the snowflakes and the @media queries thank you @biscuitmanz!
I straightened the checkboxes but now they don’t show up on mobile. Is there a better way to do this?
When creating a media query where do I first start? How did you get 600px? Is it just simple trial and error? Continuously changing values and then going back to check on your phone? or is there an easier way?
i just used 600px because mobiles width are smaller than 600px but you should use ones for tablets too when you make more sites in the future but wouldn’t worry about that just yet just use 600px for now and then do some reading on it or something aint it, if you use chrome it has mobile and tablet view in if you right click and click inspect that will save you keep having to check your phone.
as for your checkboxes try putting them in a div and move it to center, i will have a look and post some code your not sure what i mean.
@biscuitmanz Dude, thank you so much! You’ve been a lot of help. I didn’t know that F12 provided so much information, I’ll definitely start using that much more. I actually tried the div thing earlier and It wasn’t working because I had the end div in the fieldbox container . Lol, So thanks for actually forking it and showing me how.
Couple questions for you, if you have the time.
I definitely need to do a lot more reading on media queries and making my websites responsive to phones/tablets. Are these major undertakings? Or are they something that can be done easily? and should I focus on learning to do that now?
I tried applying the max-width: 600px media query to my Tribute page https://codepen.io/Jaypad07/pen/jQLdGK but it still looks bad on phones. So, I’ve come to the conclusion that you have to pretty much redesign your whole page in a media-query for phones/tablets. There is just no simple way to scale everything down to fit nicely. Is this correct?
yeah i would defo recommend getting used to media queries now rather than later and its not all media queries that will make it responsive the idea is to build the site flexible as possible so you dont have to use loads of media queries, stuff like flexbox is good for this with flex:wrap so it will wrap your content automaticaly when the screen size changes.
as for your site the good thing is you have used grid but you have used multiple grids its would be better to just use one grid for the whole page in future its easier to manage,
anyway so its just a case of moving the template areas around with a media query here is an example with the tribute info:
put this at the bottom of your css then do the same for your other grids, also you should change your links width from % to px don’t use % on stuff like that, here are some flexbox games a good way to learn flex as it will help you with responsiveness and better layout.
and lastly the colors that you’re using can make it hard to read for some people, using full black is not a good idea try use more easier on the eye colors here is an example:
Ah ok. I will definitely start working on these today. I kinda was reaching in the dark while working on my Tribute page. I never coded before then and I there were times I didn’t exactly know what I was doing lol. I just tried the best I could to make it work.
Honestly @biscuitmanz I really appreciate the advice and even the links here to help me learn. Thank you so much.
no problem bro, your doing great tho man with the Christmas theme with snow and using grid on your first ever site is pretty impressive man my first sites weren’t half as creative lol let me know if ya gets stuck again
@biscuitmanz Thanks for the compliment! I think I took way too long on the projects though lol. I also still don’t understand the grid fully. There were times I couldn’t understand why it was acting a certain way lol. You seem pretty knowledgeable. Did you already know how to code before you came here or did you first start your coding journey here as well?
I worked on my Tribute page for like 3 hours yesterday. I tried adding the media queries to each grid and everything was still off on my phone. Except for the #tribute info one you did lol… So I messed with the template area’s in #awards and finally got it to go straight down. I’m still not sure why the border doesn’t wrap around it.
Also, the pic for some damn reason won’t go to the left. I’ve tried margin, padding, absolute position, making the pic smaller, and tried messing with the template-areas. I’ve tried all these options on #pic-back, #img-div, #image. I’m failing pretty bad in this area lol.
Overall, I think that since I made 3 different grids with grids within grids and didn’t make the page one whole grid that it’s getting messed up on mobile? I was thinking about trying to redo the whole page as one grid as you mentioned before.
i started on here but then i started some video courses on youtube then i came back to here finished the challenges and started the projects but i think when you really get the hang of it when you start building your own sites from your own ideas you seem pretty creative so i dont think you will have a problem thinking of ideas
im pretty knowledgeable on html and css but i still think i have a lot to learn like grid i dont really know grid that well as iv never had to really use it that much i use flexbox way more.
i understand the concept of grid i just aint got that much experience in it, same as javascript and jquery i know the basics and how to use them to animate a page but i wouldn’t call myself a programmer aint it.
and there aint nothing wrong with taking long to build your sites bro its all about gaining experience and the longer you spend building the more experience you gain.
yeah as for your site i dont think that 3 grids was necessary, there aint nothing wrong with multiple grids but using them for just a couple of boxes dont make much sense so what probably have been better is to have just used grid on the bottom part with all the awards and just used flexbox on the top bit and the bio.
i will take a look at your site now bro see if i can sort the image problem.
Lmao bro I’m loving this flex zombie game! I’m running Dungeon Crawler music in the back on spotify haha
I figure you’re right I shouldn’t mind taking long on these projects as long as i’m learning. So,I might as well fix this tribute page and learn how to use flexbox correctly. For a while there I thought all it did was flip boxes around. At least from what I remember, that’s what the tutorial showed. I’ve been reading a lot more and looks like its really useful.
it basically does just flip boxes around lol but thats what ya need for responsive sites it just makes it easy to evenly spread boxes and have them change for different size screens so its simple but very powerful tbh.
glad you liking the game lol the other 2 are good too i really liked the defence one but they are pretty short.
as for your site there is something strange going on lol it must be something to do with the grid maybe but its side scrolling pretty far i had to put a overflow hidden on your body to fix it, i changed the top box to flex for quick fix but its still not perfect still needs some work, i only changed stuff in the media queries so just look in there to see what i did and take some ideas.
I passed the tower defense game last night. I think I understand the flipping of boxes around a lot better lol. Still enjoying the zombie one though. It’s super creative. I’m sure you already know but there is a Grid game from the same creator. I’m not sure if that’s trivial to you though. Just wanted to let you know it’s out there.
I can’t wait til I’m good enough to be able to fix problems like this. I don’t understand some of the things you did like overflow-x:hidden or box-sizing:border-box. I’ll look them up though. Is the use of one element better than the other? Or does it depend on the situation? Grid vs Flexbox? Can’t you achieve the same out of them? I still have a lot to learn. I’ll continue to work on the tribute page. I’ll even switch up the color scheme. Thanks again bro.
yeah i commented the overflow hidden out because i found out the problem so its no longer needed, it turns out it was the auth margin 900px causing it so i just took the margin off instead, all overflow hidden does is cuts off anything outside of the div that overflowing so if you had a box of 100px width and 100px height and your put loads of text in there eventually it will overflow outside the div and overflow hidden will cut it off, or overflow scroll will cut it off but put a scroll bar on it so you can scroll through the text hope that explain it a bit the x just means it only affects width and if it was overflow-y it would be height only.
yes there is a difference between flex and grid, so grid can have rows and columns at same time flexbox can only have columns or rows but not both, so grid is 2 dimensional and flexbox is only 1 if that makes sense. you can achieve the same with them but you would have multiple flexboxes to get the same as one grid.
and box-sizing:border-box stops the box getting any bigger on the outside when using padding so it pushes the content of the box inwards instead of the box border outwards. keep doing what your doing bro and it will all make sense in no time each project will teach you something new, happy coding bro
@biscuitmanz hey bud! Hope you’ve been well. I’ve been practicing a lot of flexbox lately. However, I lost a good chunk of your changes and I was pretty mad about it earlier lol. It was on one of my tabs and I accidentally overwrote some of your changes when I was testing things.
I’m learning so much with the Zombie flex game, I’m about halfway through. Taking it slowly and resting each day when it tells me to. I felt confident enough to change the img-div to all flex box. I left the other grids alone for now since it seems to be working well. Let me know if you like or hate the new changes and any feedback you may have on how I did the flexbox.
Also, how can I get the world picture to be a little closer to the title? I think the gap is a bit too large.
hey man nice job with the img-div you done it the best way possible and so it wraps itself good job man seems you’ve learnt a lot from them games glad your enjoying them, looks good in mobile view all the boxes line up nice job on that but on smaller phones like the iphone 5 the text starts overflowing on the awards section so to fix that you could do something like this in the media
also at the bottom in mobile view your auth is missing the word coded this is because it still has a margin-left 900px, this is also causing the page overflow problem so just add something like this to your media -
.auth{
margin:0;
padding-bottom:20px;
}
then you can take the overflow-x;hidden off your body tag it is no longer needed.
as for your gap in between your img your title its because you have a padding-top on your h1 tag so just take that off.
i would also suggest shrinking the title in mobile view too, just so it stays on one line so you could ether do this in the media query or your could give your h1 tag a font size in vw (view width) instead of px this will make your text shrink with the page, nice job with the colors too bro looks good and easier to read too your doing great and now that you know flexbox it should make things easier with future projects it will also make it a easier to make responsive too, keep it up man
Great ideas thank you! I tried using vm instead of px but the title became really small in mobile so I just changed the px in the media query. Also, I changed the auth to flex and properly aligned it. Now that I actually know how to align things I won’t need to use margin 900px! haha I figured you probably didn’t want me to mess something up so gave me a shortcut. Thanks for all the help bro I wouldn’t have figured it out already without ya.
. Lol, So thanks for actually forking it and showing me how.
