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 
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