I have noticed that when I minimize my screen, everything but the profile picture of Miyazaki tends to move. The profile picture of Miyazaki is the only thing that seems to be fixed. Can someone explain to me why this is so, and how to fix it?
Iād like to understand my mistakes so to clarify-- was the reason why the padding needed to be removed so that it could be centered with the parent element?
right now your page has some serious responsive issues.
Flexbox can be tricky to work with. Here is link to a fine guide i use whenever i feel stuck, its very newbie friendly:
You should make use of media query and one approach is to change the direction of flexbox, so on smaller screens where two items cant fit together on the same row, they align in a column instead. Or you can make flex items take only maximum of certain amount of the flex container, e.g. 50%, this way only 2 items will take a row and other items would go to a new row.
Like mentioned already, mind your padding and margin, large sizes can harm on smaller screens
Admittedly, it is a bit difficult as a self -teaching newbie to grasp responsiveness on various platforms and to consider them while making projects like these.
Are there websites, etc that you may know and could recommend where I can read up on to gain a better understanding on creating responsive sites?
Also, thank you for the tip and how-to pictures! Iām thankful youāre always taking the time to read and respond to all the postings that I put up!
I have actually come across that website and have read it when I was making this project!
Unfortunately, I donāt think I still have a solid grasp on the concept of using flex although I do know more than I did intially (which is progress .) By chance, do you know any other preferably newbie friendly sites, etc that I can look up on to help understand on multi-platform responsiveness?
Also, thank you for the tip! I will keep that in mind!
To clarify on the second approach of making flex items take only a max of certain amount is this done through using max-width?
You probably have come across https://www.w3schools.com/
Its newbie friendly documentation on vast number of programming technologies, which doesnt dwell in too much specifications and have handy examples. As a newbie, whenever i came across a line i didnt comprehend, id look it up there. Stackoverflow is also great to find the answers of common and not so common problems. Usually whenever i put s specific question onto google, ill have a useful link among the top results.
About multi platform responsiveness, im not so sure, i dont really focus that much into making my projects answer to mutli browser specifications, for now i focus they work alright on chrome. If you havent figure out yet, you can use the inspect option when clicking right button over your web page in chrome and you can see feed from the html code and console. You can also adjust the screen size, which simulates different ratios, its good way to see if your page looks alright on phone lets say.
Flexbox has its own flex properties(on child items), grow shrink and basis, and i admit even i struggle still to fully comprehend them, but usually you can make your elements align alright using them. For example with flex-basis of 50% the element will take up to 50% of the container row(when its direciton is row), which means 2 elements will fit into 1 row and other elements will go next row, but again, this also takes in mind other properties, like margins, etc. There isnt really a right way to do it, only a way that fits the current situation and your current foresight of the project. Your job is to figure out how to make it happen . Max width can also come in hand
Yes! I have come across many of those i.e. developer.mozilla, w3schools, etc. Basically anything I could find through googling. I also do have an account on Stackoverflow that I ask questions here and there (to be honest, though I feel requirements for asking questions are a bit more strict on that platform) but it indeed is a very resourceful site.
Whenever I can (and donāt feel overwhelmed), I nowadays tend to inspect sites to see how they made their websites, especially for sites not as complicated i.e Google, Youtube. But I didnāt know that I can adjust the screen size for the inspection! To confirm, would it be the icon with the phone and tablet that says āToggle device toolbarā (cntrl + shift+ m) right next to the element tab?
I appreciate the examples that you give out and the time you take to explain it thoroughly. Itās hard to comprehend and learn on my own, let alone trying to understand reading/writing as Iām more of a visual learner.
Oh, I see! Iāve been using the middle layout this whole time! Thank you for the correction. Is the layout on the left designed in a smaller screen view?