How to keep scale same on all platforms/various screen resolution?

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?

Below would be the link to my codepen.
MyCodePen

Thank you in advance! :slight_smile:

PS: I am also having a difficult time completing User Story#9 and would love to get help on that as well. :sweat_smile:

HI @KO-d14 !

If you delete the padding in both the img div and image selectors the test should pass.

For you other issue, maybe you could experiment with placing the image and text in a row using flexbox.

1 Like

HI @jwilkins.oboe,

Thank you SO much :star_struck: You’re so helpful!

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

2 Likes

I don’t think you needed all of the extra padding personally.

I can also tell that you are designing for desktop first and not considering mobile platforms.

I think you need to change your approach and start with a narrow screen and then expand.

That will fix a lot of responsive issues you are having.

You can change the editor layout in codepen to help you start with a narrow screen first.

Hi @jwilkins.oboe !

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. :pensive:
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! :smile:

Hi @Sylvant!

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 :smile:.) 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?

Thank you!

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 :wink: . Max width can also come in hand

CSS tricks has a lot of helpful information.
But a lot of it just has to deal with starting with a narrow first approach like I mentioned earlier.

As for different browsers, can I use is a website where you can see what features are supported in which browsers.

1 Like

Hi @jwilkins.oboe !

I tried testing out the editor view that you have mentioned, but it didn’t seem to do anything aside from what it seems like refreshing the page? :thinking:

Thanks!

Also, thank you for the tip! I will try and use the website for when I need to check what features are supported in browsers. :smile:

Hi @Sylvant !

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. :slight_smile:

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. :slight_smile:

Did you change the editor layout like I showed you in the screenshot?

In the screenshot, you can see three different layouts to choose from.

Did you pick the far left one?
That layout will place your code on the left and your final result on the right like you can see on the screenshot.

This layout will help you design for smaller screens.

Hi @jwilkins.oboe!

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?

It will enable you to narrow the window width so you can design for smaller screens.

I would suggest you start at 400px.

1 Like

Hi @jwilkins.oboe !

Thank you for your patience! I must’ve overlooked this notification :sweat:
But noted! I will keep that in mind and hopefully be able to implement it :sweat_smile: