How to adapt the site to smaller screens


#1

I'm on 'HTML and CSS Projects' section. I've decided to make the project "Move" completely by myself. It's ready. But it looks great only fullscreen! And as soon as I try to watch it in the smaller screens, it crushes. I've corrected some things, such as px into em and %. Now it looks better, but there are some problems with the images.. Could anybody help me to fix them?
https://www.codecademy.com/courses/web-ext/projects/html-css-prj_move?user_id=56839335e39efeacea0000a1


#2

i never trust exercise url that they open the right persons code, i put your code in a bin, can confirm it is yours before i dive into it?


#3

Yes, it's mine. Yesterday one of your advisors told me that a code outside CodeAcademy isn't allowed to review!!! That's why I input it in the codeacademy the code and sent it here!! How can I confirm it's mine???


#4

i got this code from the url you included in the topic, so for projects it seems to be fine :slight_smile: So the code you send is yours :slight_smile:

Moderators != advisors, if you put exercise related code in a bin/github gist, for me, that is fine


#5

I don't understand how you've determined it's mine. But it doesn't matter. Well, will you help me now or I have to do something else to prove the code is mine??


#6

I just wanted to be sure i worked on your code, otherwise it would be a waste of time. Sorry to confuse you, i will help you :wink:


#7

Thank you very much, I'm waiting for your comments :slight_smile:


#8

for .inter_block .container, i wouldn't use margin's with px

Instead, just make the container have a width of 100%, and a max-width of for example 1200px, and use margin: 0 auto; or text-align: center; to center the blocks/text. That is already much better practice


#9

That's all??? And there is no more anything to fix? You know, I thought too that it's needed to center blocks/text. But it turned out they are NOT centered in the project!


#10

no, its a good start. Get rid of all the pixel margins.

Have you had max-width and min-width yet? they are also really useful. After you made this changes, you can post an updated version of your code and i will look further at it :wink:


#11

Some things are not clear: you tell me about .container or .inter_block .container with width of 100% and max-width 1200px and how to center them? And you know, I thought too that it's needed to center blocks/text. But it turned out they are NOT centered in the project! And if I get rid of all pixel margins, then how to vertical center the blocks and what about the height of the blocks?? As far as I wrote, it's written anywhere: 'It's a BAD method to use height fixed in the code'. So that I achieved them just with margins!


#12

no, i told you to get rid the margins from .inter_block .container

then i told you make your container (aka class container) have a 100% width and a max-width of 1200px.

I gave you the centering guide? Oh sorry, for your vertical centering you can keep the fixed pixels, but for your horizontal centering this is not recommend, given that scales really poorly


#13

I've updated my code. But as I've told your, the text of the inter_blocks in comparing with the project (https://s3.amazonaws.com/codecademy-content/projects/move/index.html) is NOT centered, it's shifted to the right!
https://www.codecademy.com/courses/web-ext/projects/html-css-prj_move?user_id=56839335e39efeacea0000a1


#14

if you added single sided padding:

padding-left: 34px;

it will indeed shift to the right.


#15

Sorry, I'm not an English native speaker and my English is poor... I wanted to say that in the PROJECT the text is not centered and shifted to the LEFT. And in the updated code (as you've told me how to fix it) is centered. They don't correspond if you look at both sites.


#16

what do you mean by the text? Everything?


#17


#18

looks pretty much the same as the site:

okay, on smaller screen it isn't an exact match, build your own system, do you then want an exact copy of the lesson system? Then you might as well have used that system. What is your question?

please be careful with the use of w3schools:
https://www.quora.com/Why-is-it-that-some-web-programmers-and-designers-do-not-recommend-W3Schools-to-use-as-a-reference-manual-and-what-are-some-alternatives
http://w3fools.com/


#19

I'm a beginner in the HTML and CSS. Now I try to use the knowledge from the lessons for building the given examples in the section 'HTML and CSS Projects'. And as a person who doesn't have at least minimum previous experience of building sites, I don't know if the result of my code should be an exact copy of the projects of the above-mentioned section or no? This is the first question. The second one is that I could make the exact copy of the project "MOVE" but only fullscreen. When I tried to watch it in the smaller screens, I noticed that there is no only some difference, but there are more mistakes, for example, white bars between the main parts of my site and even laterally. Now after your help only lateral bars remain and I'd like you to help me understand how to adapt my code to any screen that it looks good without problems. It's a pitty but nowhere in the Codecademy is told how to do this. I thought you could help me.


#20

This is a dilemma, there are two things you can do:
1. do the project and follow the steps to increase your knowledge and get the same result
2. Try to build the project on your own without the lessons instructions

i would actually do both, but do 2. first.

Then, once you feel like you exhausted your knowledge, do the project and follow the steps, see where there are gaps in your knowledge, learn from them and apply them to your own project.

There are two very important elements when designing a web-page, which are UI (user interface) and UX (user experience), you don't have to make an exact copy of the project, rather make sure the interface and experience are good for the user.

i will look into it, but since you don't have to follow the project to the letter, i need to hear from you what is wrong, and how i could help you. Since you made decide to make things different to improve the UI or UX

I have a question, have you learned to use the browser to your advantage? How you can view source code and inspect elements? And see what space they take up?