What are some of the advices for coding mobile to desktop version, if their pages' contents are different?

Hi Andrea,

First of all, it doesn't matter what platform you're viewing a website in, it will always have the same HTML. So as you rightly suggest, you optimise your HTML for smaller devices first and then scale the content up. Doing this will give you the best chance of making good interfaces no matter what the size of the screen.

So how do you get content to appear on one screen size for not the other? Well each element has properties that can be manipulated using CSS. Each element for example, has a display and visibility property which are set to show up on the screen by default.

The way you manipulate them depending on screen size is with media query breakpoints.

Take this simple example

@media screen and (min-width: 480px) {

   p {
     display: block;
}

}

@media screen and (max-width: 479px) {

   p {
     display: none;
}

}

Let's say you have a simple HTML document with only one paragraph element in it. Let's also say for whatever reason, you wanted to remove that paragraph on screen below a width of 480pixels. The way to tell the browser to remove that paeagraph is by giving it a display property of none.

If you then tested the page on the browser and decreased the wifdth short enough the paragraph would disappear. I hope this helps clarify things go you :)