I am creating a new site. In the head I have
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<!-- for mobile phones -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
However, on mobile devices its large and you have to scroll horizontally. i was expecting it to scale and fit into the width of the device. I have used this before on other sites and it has worked fine.
What's wrong please
Related
I used to be able to type "!+tab" at the beginning of a new HTML tab to create the basic layout of an HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sunshine Seasonal Solutions</title>
</head>
etc.....
What could I have changed in the settings for the snippet to not work anymore?
Tried different settings in VS Code
I have a very simple HTML page that shows bitcoin prices, on mobile it looks terrible because the text is really small and there is a lot of empty space on the right. How can I make this so it fills up the width of the page?
<html>
<head>
<title>HTML in 10 Simple Steps or Less</title>
<meta http-equiv="refresh" content="60" />
</head>
<body>
<script src="https://widgets.coingecko.com/coingecko-coin-list-widget.js"></script>
<coingecko-coin-list-widget coin-ids="ethereum,bitcoin,aave,convex-finance,dopex,dydx" currency="usd" locale="en" width="300""></coingecko-coin-list-widget>
</body>
</html>
https://imgur.com/a/dNG0EKM
The following header tags will prevent the device from scaling automatically and allow you to take control.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="HandheldFriendly" content="true">
Then, assuming its an iframe, apply this CSS:
iframe{width:100%}
I have a website called www.caminemosjuntos.com.ar and I add the facebook share link button but the default preview image is not what I want to show. So I try to add <meta og:image property inside the head to customize it but when I debug the page I notice that browser is rendering inside the body tag.
I'm using python-flask with boostrap and templates.
This is how start my header.html:
'''
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes">
<meta name="description" content="">
<meta name="author" content="">
<meta property="og:image" content="https://www.caminemosjuntos.com.ar/static/img/pathway.jpeg" />
'''
and browser is rendering from post section: (post.html include header.html)
'''
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes">
<meta charset="utf-8"><meta name="description" content="">
<meta name="author" content="">
<meta property="og:image" content="https://www.caminemosjuntos.com.ar/static/img/pathway.jpeg">
<title>Caminemos juntos</title>
'''
How can I do to fix this? Facebook is still saying that I don't have explicitly the og:image.
Thanks
I am guessing that your image could be too big try reducing the size or try a smaller image. Try different sizes and resolutions.
See: https://developers.facebook.com/docs/sharing/best-practices#images
I have a big problem with meta tag. More precisely:
<!DOCTYPE html>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
I have a program that automatically "push" things on eBay (with template). I want responsive template (it is made on bootstrap), but I can not use these tags because this program (literally) cuts it. At this point, all my work on the template goes in vain. Can someone colud help me?
When I remove initial and maximum-scale out from the meta tag:
<meta name="viewport" content="width=device-width, user-scalable=no" />
tag, iOS 6 Safari is diplaying the site too large. I have to take the initial and maximum out for it too fit correctly. Is it acceptable to leave the viewport tag like this? I haven't tested on other mobile devices.
I use the following for ensure proper sizing on all mobile devices:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
In some cases, I will adjust the initial-scale down a minor amount to ensure the proper scale:
<meta name="viewport" content="width=device-width, initial-scale=.96"> // Scale as needed