The page doesn't feet other platforms

Question

Hey sololearners,
I made a project in sololearn[link bellow] and I wanted to see how it would look like in Chrome but the buttons aren't at the place they supposed to be.
How can I fix that?
https://code.sololearn.com/WE781z3Z78Jb/?ref=app

Answer 1

The link works, the application does not recognize the link

https://code.sololearn.com/WtY04enmKB4F/?ref=app

Answer 2

Your HTML looks good on mobile. Where should buttons to be placed?

Answer 3

Ah then you should create few @media rules in yoir CSS for different screens sizes.And you should modify size of your f.e title(heading) and button to fit perfectly on screen.
f.e
@media (max-width: 768px) {
write your rules here
}

Answer 4

But thank you soooo much bro for helping me! 🙏

Answer 5

Much better!
Thank you!

Answer 6

Faraz Haghbayan For responsive web design, I would recommend you to use `vw`, `vh`, `vmin`, `vmax`, `em` and `rem` CSS units.. Also, you can set your media rules for different devices.

Answer 7

Should all the devices have the same rules?
For example all on 600px

Answer 8

I know but it does only in sololearn and not in chrome unless you zoom 73px in

Answer 9

how does it look on chrome?Where are the buttons?

Answer 10

https://html-css-js--farazhaghbayan.repl.co/

Answer 11

Are the buttons in the places that they are meant to be?
For me not un less I zoom in 73px

Answer 12

sry cant see the diference here on sololearn and on chrome.Where exactly do you want to have your buttons.And by buttons you mean on the hamburger icon which overlaps title or on the togle menu buttons.
Btw if you want to have similiar achieve on all browsers you first should normalize your CSS.

Answer 13

Yes exactly!
The hamburger icon

Answer 14

It does not fit its place like in Sololearn

Answer 15

And what do you mean by normalize CSS?

Answer 16

Ohhh ok!
I will try that!

Answer 17

It is kinda boring part but if you want to make a webpage responsive you have to do it.Or you can use bootstrap for easier manipulation.

Answer 18

I have been seeing "bootstrap" many times in the codes but I don't know what that basically is...
Time for researching!!😂

Answer 19

Look, I think it's not bad

https://www.sololearn.com/compiler-playground/WtY04enmKB4F

Answer 20

MalKon I think the link does not work