Error with HTML viewport - html

my current HTML with this viewport:
<meta name="viewport" content="width=device-width,initial-scale=1">
is providing undesired results such as these:
While deleting <meta name="viewport" content="width=device-width,initial-scale=1">
provided me with another undesirable result as text gets unreadable, like this:
What am I doing wrong?

Have you tried this?:
<meta name="viewport" content="width=device-width" initial-scale="1">

Maybe you need to declare correctly all tags:
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Related

How do I enable Link Preview Images for a Jekyll Website?

I am looking for a way to display an image when the link is posted on Twitter, Discord, etc.
There is a spot for the text but I am not aware of a place for an image.
I am expecting an image to display like this:
This is what I am getting:
The description text was changed in config.yml so is there a parameter for the image there also?
I am unaware of how to make the link preview image appear. Think it might be in the config.yml file.
The description is the description from the head of your website.
<meta property="og:description" content="This is the website that hosts Eshan Iyer’s portfolio and resume as well as many projects that he has created.">
The image is not the favicon as I thought but another meta tag:
<meta name="twitter:image" content="http://graphics8.nytimes.com/images/2012/02/19/us/19whitney-span/19whitney-span-articleLarge.jpg">
See https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/summary-card-with-large-image
To show it, you need to modify/customize the head file for the minimal theme, either in head.html or in custom-head.html.
I'd try head.html first:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="twitter:image" content="https://avatars.githubusercontent.com/u/86535168?v=4">
...
</head>
can you please try to add <meta name="twitter:card" content="summary_large_image" /> and <meta name="twitter:card" content="app">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://avatars.githubusercontent.com/u/86535168?v=4">
...
</head>
and
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="twitter:card" content="app">
<meta name="twitter:image" content="https://avatars.githubusercontent.com/u/86535168?v=4">
...
</head>
this will resolve your problem, Twitter may take some time to redirect before posting on Twitter validate your link here 2-3 times

css style are not getting applied in github when deployed

I am trying to deploy a small html and css project on github but css styles are not getting applied after deployment. I am very new to github and I don't know what is the probelem. Any help will be appreciated.
HERE IS THE MY REPO OF MY PROJECT:https://github.com/Subhodeep014/Frontend_Mentor_testimonial
In your header, you used a double single quote instead of one.
the wrong code:
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Testimonials</title>
<link rel=''stylesheet'' href="style.css">
</head>
the correct one:
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Testimonials</title>
<link rel='stylesheet' href="style.css">
</head>
I Check the link and pages load Properly with cssView Link

Disabling zoom meta tag

What's the comlete version of the zoom disabling viewport meta tag?
I have tried with: <meta name="viewport" content="width=device-width, initial-scale=1">
but it just sets the appropriate scale and doesn't prevent zooming.
I also tried with: <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,target-densitydpi=device-dpi, user-scalable=no" />
But it just doesn't work, I can still pinch zoom on my mobile.
It finally worked using that this way:
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
You can use this:
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,target-densitydpi=device-dpi, user-scalable=no" />

meta name="viewport" doesn't seem to have effect

I've placed this tag on my website:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
And on Firefox and Chrome for Android the site looks like this:
While I'm expecting it to look like this:
What am I doing wrong?
I've also tried the solutions in this post, but nothing helped.
This tells the browser to render the page at the same width as the device's screen has pixels:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
It sounds like you'd prefer to render at some other width, like maybe 800px:
<meta name="viewport" content="width=800, initial-scale=1.0" />

Facebook do not use image link?

I have a header that looks like this on my ASP.NET MVC webpage :
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
<meta charset="utf-8">
<title>MyTitle</title>
<meta content="Återanvänd på rätt vis" property="og:title">
<meta content="website" property="og:type">
<meta content="http://MyWebb.se/Post/Detail/392" property="og:url">
<meta content="http://MyWebb.se/Content/Files/PostThumbnails/392.jpeg" property="og:image">
<meta content="Some info" property="og:description">
<meta content="MyWebb" property="og:site_name">
<meta content="Återanvänd på rätt vis" name="twitter:title">
<meta content="http://MyWebb.se/Post/Detail/392" name="twitter:url">
<meta content="Some more info." name="twitter:description">
<meta content="http://MyWebb.se/Content/Files/PostThumbnails/392.jpeg" name="twitter:image">
<meta content="http://MyWebb.se/Content/Files/PostThumbnails/392.jpeg" name="description">
<meta content="keywords" name="keywords">
<link href="/favicon.ico?v=2" rel="shortcut icon" type="image/x-icon">
<link href="/Content/Theme/MainTheme.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width">
</head>
And when checking it with this tool : https://developers.facebook.com/tools/debug it does fetch the image.
But when I paste the url in to the wallpost it will only fetch title and desciption, no image. If the thumb however is square the image load just fine.
Why is "not square" images working? Should I generate empty space on all my thumbs(transparent borders with png) so they get a square format? Or is there another solution?
Maybe its because I'm missing the end tag for the meta data? But then the test tool should not fine the data?
The problem was that the og:image was of to small format, after this was fixed it worked just fine without stating the size.
Try defining the image type, width and height as per the example on the Facebook Developer docs - https://developers.facebook.com/docs/web/tutorials/scrumptious/open-graph-object/
<meta property="og:image" content="http://example.com/lamb-full.jpg">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:width" content="3523">
<meta property="og:image:height" content="2372">
See also this SO answer - New og:image size for Facebook share? - it sounds like there are minimum dimensions for the images.