Responsive web design

Question

Hello everybody!

I have a question about the responsive web design. I'm making a site now on laptop with medium resolution and I was using "px" to locate everything on the page, but then when I open it on a monitor with high resolution, my site was located left and small. So I change most of the things to "%" instead of "px" and I fix that. So now in every resolution higher then that of my laptop I'm great. But now I have other problem. When I test it on a laptop (not smartphone) with smaller resolution then mine, my items go on top of each other. So I decide to make the width of everything in "%" and for example I'm having 3 items next to each other, I give them like 50% 50% 50% and I was hoping that 2 of them will stay and the last one will go under them, but instead they go on top of each other. I try margins, different browser, changing the position (which is absolute) and nothing give me result. So how can I make the items go next to each other instead of top of each other?
Thanks!

Answer 1

1) The "position:absolute" depends on the first element with the position different from static, you did not say anything about it, generally a "bottom: 0;" property is enough to move your elements.

2) You should not use the percentage for every single element, you might found elements too big for big screen and too small for small screen. As @Calvin said, use the mediaqueries as well to create your webpage.

3) If your elements are centered, try: "left: 0" & "right: 0" (only if you have the position:absolute, otherwise skip this "step")

@Arthemis "max-width:50px" is for smart watch? :3

@Dimityr, "max-width:768px" should be enough. ;)

/***** Example *****/

@media (max-width:768px) {

body { width: 50% }
/* Other elements... */

}

Answer 2

@Dimityr you don't have to add it... it is just an example to show you how to use mediaqueries. :3

- Edit -

This can be helpful in this case: https://code.sololearn.com/WErMBTrF3Hc0/?ref=app

*pixels are totally different from em values*

Good luck btw. :)

Answer 3

Use @media. Set font size using em, not px.

Answer 4

@Maz Thank you for the answer, I go testing now. Didnt add last time the body{width:50%}... And for the "%" I'm using this not for the size, but for the position of the elements. So they just change the position according to the resolution, not the size. For the size I'm using "px" but as @Calvin say I will change it now to "em".

Thanks all, I hope it works!

Answer 5

So to make it look different on screens under 768 what should I use?

@media screen and (min-width: 768px) or
@media screen and (max-width: 768px)

Because I get that from w3schools, but for some reason didnt give me result and the items continue to stack on top of each other even when I put 100% width.

And is there any difference where in my CSS file I put @media, because for some reasons dont work for me.

Answer 6

@Maz, Sorry I was excited :D

I just add now for test:

@media (max-width:768px) {
header {width: 1%; }
}

Which means that the header line of my page should be 1% when its open on devices under 768px, but stays the same, no result, what may cause this problem?