<meta name="viewport" content="width=d evice-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> - DOESN'T WORK ! HELP!

Hi, i am very new to coding and doing Product Landing page. I am so stuck with mobile compatibility. Putting in the doesn’t make any difference. The size is way too big on mobile screen and horizontal scrolling …Already 2 days searching and no results.
Here is my page : https :// codepen. io/Harissonas/full/drGxgb
Thank you !

You have an iframe with fixed dimensons.

hi friend
1-all visible area in browser should be inside body tag
you inserted body inside div element with id=“page-wrapper”
do the inverse div id=“page-wrapper” inside body
2-remove head and html tags with meta tags keep only the code inside body in html box
3-insert meta tags in html paramatre in heade section
2: to build a responsive web with all devices you should know @media queries
it works like this
/* for extra small devices /
@media screen and (max-width:600px){
css-style
style elements as you want
}
/
for small devices /
@media screen and (max-width:768px){
css-style
style elements as you want
}
/
for meduim devices /
@media screen and (max-width:992px){
css-style
style elements as you want
}
/
for large devices */
@media screen and (max-width:1200px){
css-style
style elements as you want
}

hi friend
1-all visible area in browser should be inside body tag
you inserted body inside div element with id=“page-wrapper”
do the inverse div id=“page-wrapper” inside body
2-remove head and html tags with meta tags keep only the code inside body in html box
3-insert meta tags in html paramatre in heade section

Thank you jenovs.
I left only heigt=“315” in html and
max-width: 560px; width: 100%; in css, but it didn’t help :frowning:

Hi, thanks. I did everything exactly like you told me in HTML, but still no luck.
It looks like no reaction to meta tag:

hi friend
you should style elements in media query