I am working on a site on a Github repository and I published it live on another server so that I can play around with APIs and databases. After making an exact copy of the Github files and dropping that into the new server, the media queries aren't working on my desktop or mobile. They do however work on Github.
I've tried to clear the cache on both devices, and after doing that, it shrinks down only by directly making the browser window (on my computer) smaller and not going to inspect tools. If I use the inspect tools or use my phone, it is not responsive at all. I was also told it can take 24-72 hours for sites to fully migrate, but don't know if that's the issue since I published it on Sunday night 02/14/21. I had someone else look at it on their computer and they said it seems to be responsive.
This is the very first site I've published so I don't know the ins and outs yet. What else could it be? I'll post the link to my site and also a screenshot of what it looks like on mobile.
http://creativecog.design/
Try adding this in the head of your document
<meta name="viewport" content="width=device-width, initial-scale=1">
Also why do you have two heads set up and two html elements as this will be causing your issues
Related
Since google updated their way of scoring mobile I have trouble to optimise my websites.
I want to know what am I doing wrong and what should be done to existing sites to make the score higher. Its easy to get 95-100 on desktop but on same site on mobile will be 25...
Before someone says to follow suggestions by insights then I will say that I do and I managed to remove most of them - worst thing is that the score didn't move at all. This is the biggest struggle I have, it seems that whatever I do it wont be good enough...
I followed this guide https://kinsta.com/blog/google-pagespeed-insights/ + some of my own solutions.
Is there anyone that has any good tips or permanent solution for this issue?
Google Report
As evident from your Page Speed Insights report, the main factor responsible for your low score is images. The solution to this is using RESPONSIVE IMAGES, which will drastically improve the speed of your website on mobile. What it basically means is that, you'll have to keep different sizes of the same image available for the browser and browser will decide which version of the image is suited on a particular resolution.
1) Here's everything you need to know about Responsive Images --> Responsive Image (CSS Tricks)
2) You have to shift the <link href=".." .../> and <script> tags from top of the page to the bottom of the page, just after the <body> tag. This will fix the `Eliminate render blocking resources issue.
3) You can use Javascript Minifier to minify your JS. Just paste your existing JS code inside the Input Javascript box on the website and click MINIFY
Also, cache policy is also one of the factors, bringing your score down. An efficient Cache policy will make browsers, load your website faster, after the first load. Cache handling is server specific, its different for Apache, Express etc.
I made a post on WordPress, then shared it on a Facebook page. In the past, the shared image would be the large "post" image. But now, for some reason, it's using the thumbnail. Running the url through fb's debugger shows that Open Graph recognizes both og:images, but that neither of them are being used in the share preview. Once posted, it uses the thumbnail.
I checked the meta content in the page head just to double check and sure enough, it looks fine:
<meta property="og:image" content="##">
What's causing this? It's recognized, but not used. What?
I currently facing the same issue, after contacting facebook, it turns out there is an issue in Open Graph in facebook that affects some users.
The Bug has been reported and assigned as "high priority" in Facebook support center - https://developers.facebook.com/bugs/978421888869140/
Be sure to have a look at
https://developers.facebook.com/docs/sharing/best-practices#images
You need at least images of 1200x630 pixels size to be able to get a large preview image.
Furthermore, you should put the larger image first IMHO.
See
https://developers.facebook.com/docs/sharing/webmasters/optimizing#cachingimages
https://developers.facebook.com/docs/sharing/webmasters#images
We're experiencing an issue with our site, YouSIMUL8.com. We use this site to allow people to run simulations on the web. An example simulation can be found at http://www.yousimul8.com/watch.php?x=4d5005d769d31.
If you have a look at what's going with this page, when you press play it loads an iframe in and the simulation is shown there.
I've been speaking to a customer who has been having difficulty using the site. When they open a simulation, only the border of the iframe is shown and nothing else happens. This is using IE10. The problem disappears when compatibility view is turned on.
I cannot replicate this issue with IE10 no matter how hard I try. The customer's IT is outsourced so they cannot access the settings, developer tools or console in IE.
So the question is this: What configuration of the client's machines could cause this behavior?
To force to the rendering of the page to latest version of IE, overriding the automatic compatibility view, try to use the Meta Tag Compatibility View:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Have a look to this StackOverflow post.
I am completely puzzled and discouraged. There is the following problem on a website: Google AdSense banners are not showing up in Internet Explorer until the browser is somehow interacted with.
I have checked it on four completely different computers and the problem looks the same: the ads are not showing at all, until you do one of the following:
resize the window, or
press "alt" button on the keyboard, or
open up the console (F12)
In other words, the ads show up right in their right place after I somehow interact with the browser window. And that is happening in Internet Explorer 11! On four totally different computers.
I can't wrap my mind about it. Does anybody have any kind of idea what this might be?
I've finally found the solution. It was indeed a "ie-compatibility" issue, yet not obvious and not that easy to find.
Probably some wordpress plugin added the following line to the header:
<meta http-equiv="X-UA-Compatible" content="IE=7"/>
I changed it to
<meta http-equiv="X-UA-Compatible" content="IE=8"/>
And it worked. Why do I say it was not easy to find? Well, I played a lot with compatibility settings in the IE browser and nothing worked. And again the way the bug represented itself would never make me think that such line was responsible.
I have made a wordpress theme of a site. I used Starker Theme for the wordpress theme development. Now I want to make my site Mobile Friendly. Is there any solution to make few changes or using some plugins for this purpose? I have tried wptouch, WordPress Mobile Pack and MobilePress but they are not working. I have checked my output on the http://mobiletest.me, but this is not displaying the accurate mobile Output (Output is same as on my PC Browser). Either there is problem in this testing site or plugin? All this make me confused.
Please let me know any other solution?
Thanks in advance.
You may not be checking your site properly. Make sure you have this line of code in your html head tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
Without that line of code, your device will display the page the same as the browser.
I'm the developer of MobileTest.me, just want to clarify a few things.
As you have correctly noticed, mobiletest.me uses your PC browser's engine to render the website you want to test. This is by design as it was created as a tool to test responsive web design. The mobile devices are provided as an indicator of common smartphone resolutions.
If what you want is to send a different theme to desktop browsers and a different one to mobile devices then you probably need a wordpress plugin such as mobile detector. The problem with this approach is that if the plugin fails to determine the device browser correctly, it will probably send the PC version to a mobile device.
The other approach is responsive design which sends different CSS based on the resolution of a device and does not rely on browser detection. If you decide to go the responsive way you may find this post useful where you can check some examples of how mobiletest.me can be used to check responsive web designs (images are clickable).