I have made a simple website for a event in my town and it is hosted on AWS Amplify from Amazon. At first there was no custom domain coupled to it and so the domain name was some random url. On this url the website worked, for web and mobile. But then I asked the previous domain owner if he could couple the custom domain to this site. He did the but when I opened the website on my phone it wasn't responsive anymore, it was shown the same way as on web.
I then checked the AWS Amplify console and saw that the SSL verification failed. I'd think that it only causes the website to be hhtp instaid of hhtps but could this problem be related?
Or could the problem be a setting in the dns file or something?
I saw some similar problems were because this line wasn't added :
<meta name="viewport" content="width=device-width, initial-scale=1">
but I made the website with Angular and this line is automaticly added to the index.html file.
my previous responsive website: https://master.dkog5qeqqzcy6.amplifyapp.com/
the unresponsive website: http://www.tongerloleeft.be/
Thanks in advance.
Console looks clean, the page appears to be responsive on my end(using chrome, Firefox and Chrome Edge desktop revs.)
It's not responsive on native Andriod because the #media screen size appears to be responding at less than 640 and the default viewport of a mobile is 640 so it's never getting hit.
Also..... Why are you running it in a frameset?
<frameset rows="100%,0" border="0" frameborder="0" framespacing="0" framecolor="#000000">
<frame src="https://master.dkog5qeqqzcy6.amplifyapp.com">
</frameset>
I'd say that is the problem. Not viewport size after having a second look.
It is also responsive for me you could be using Microsoft Edge Legacy if so I recommend updating it. I have just used the new Microsoft Edge to view this as well as Chrome.
You can update here:
https://www.microsoft.com/en-us/edge
You can also use (if you are not already using) Developer Tools in Chrome and Edge to view screen sizes of devices. You can use the shortcut keys Ctrl, Shift, I
Related
I hosted a website (ninacressoni.com) and on my brackets, where I edit my website, is fully responsive. But while online, the responsiveness of the mobile disappears.
See, when I just minimize the screen on pc (brackets or website), it responds the way I want. But when I go on inspect ON the website, the mobile screen view is gone. And that is how it looks when I enter my site on a cellphone.
On brackets, even if I open inspect, this responsiveness continues. But on the site itself, it doesn't.
Can someone inspect my code and help me with this situation??? This has been very frustrating since I can't seem to find an answer.
I use Hostgator and they use Cpanel.
Could this be an error at their host services or could it be programming related?
Ps: Already talked to them and their primary guess is that is a problem with the programming (It seems it isn't because on my brackets the website works and online it works only if you just screen size it without inspect, with inspect nothing happens the way it should on mobile screen and that's how my website appears on a mobile) and in order to get a more advanced help I would need to pay extra.
(Tried explaining with details)
Can someone help this girl out? DESPERATE!!!
Your site is missing an important meta tag
<meta name="viewport" content="width=device-width">
More on responsive meta tag here - https://css-tricks.com/snippets/html/responsive-meta-tag/
Once this is added, this is what I see on my browser with Inspect Element active
Since your question lacked any sort of explanation on how the site should look on mobile device, I assume this is what you want the site to look after all.
I'm using bootstrap grids for my layout. When I make the width of my browser smaller the grid elements rearrange to accommodate. However if I view the site on my phone, or set the browser view mode to mobile device in developer options on chrome, the grid elements don't move, everything stays put but reduces in size, so I end up with a really tiny version of my site.
for my grids im using:
<div class='row'>
<div class='col-md'>content</div>
<div class='col-md'>content</div>
</div>
Am I using the -md part incorrectly. I like the the point at which it breaks on the browser but does this affect mobile as well?
edit: Just to add some peculiarities about my site.
It's hosted on Github, ie. MyName.github.io
Issue only occurs with the online version, offline the grids rearrange fine.
Im using a domain to forward to my github address, ie. Myname.com -> myname.github.io
Just incase this can affect anything
That sounds as if you didn't insert the viewport tag, so mobile devices will zoom your website to fit into the screen as is. Put this into the headsection of your html code:
<meta name="viewport" content="width=device-width initial-scale=1.0" />
Found the issue.
I am using a forward on my domain with masking to another address. This displays the site in an iframe in the original domain domain.
If i visit the domain i'm directing to directly, everything works dandy.
I'm searching for a reason and a hint why my website (Link) is not shown correctly with responsive design (based on Twitter Bootstrap) on iPhone5 Safari Browser while it is completely working correctly on desktop using IE, Chrome or Safari. Also on HTC & Samsung Galaxy the website is working correctly.
By Googling I only could find 2 solutions which are
A) cleaning the cache of the browser and
B) using
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1">
Both doesn't fix the problem. Also simulating the iPhone 5 Device in Google Developer Tool shows the website correctly while in reality the page does not show the CSS design.
Here the:
False Responsive Design Screenshot
Any idea what I need to look for as I'm running out of possible ideas.
Based on the screenshot we moved away from the Iphone theory and discovered that there was simply a problem in one of the CSS files. We had a false symbol (?) in the file and this triggered that the full CSS was not loaded correctly. It seems though that all other devices were able to compensate the mistake.
Download bootstrap to your web server and include the path in the page, so don't have to rely on another source that could go down. This should fix your problem, if not, then just try Cordova. It is possible that your your phone is being blocked by the bootstrap site because the it is going over mobile network or something like that.
Source: Personal Experience
Regards,
PRO
I have successfully tested the responsive design of my website on an iPhone locally but when I deploy it the responsive design :
works when resizing my browser's size on my desktop
do not work on my iphone
When I say it works I mean I can see it toggles the Bootstrap navigation bar for small devices, uses my custom css media queries, etc.
I have these meta in my html :
<meta name="viewport" content="width=device-width, initial-scale=1.0">
The answers I have come across mention the meta tag but it is already present on my site (I used the HTML5 Boilerplate starter). Any other ideas ?
I finally found the issue... Not at all related to my code but to the redirection from my domain name to my hosted page. My provider was using a html wrapper that basically obliterated my HTML tags (and consequently my <meta> tags). What I did was just looking at the HTML and figuring something weird was happenning... I stopped using their odd web redirection and started configuring my DNS right. Everything is working fine now.
One thing you could look for are css media queries which might specifically target iPhones or smartphones and stop them displaying a responsive behaviour, while leaving desktop browsers unutouched.
For example comment out or re-inspect any css media queries that target (min-device-width : x) or (max-device-width: y)
Alternatively, post a URL so we can inspect the css
Good luck
I recently deployed a rails app onto: http://secret-brook-8909.herokuapp.com/
I intended it to look on the iphone 4s to look like it would using: http://responsive.victorcoulon.fr/
If you look at the stylesheet of my rails app you will actually see that i hardcoded all the widths of the containers to be 320px. But when I open it on my browser on my iphone it looks like its being opened on a larger resolution screen. Additionally, on the iPhone if you click the profile button, the button doesn't look the same as it does on a normal browser.
What can I do to fix these issues?
you need to add a viewport declaration on the head of the document
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I can't see any issues in the HTML code and when I shrink my browser it displays perfectly.
When testing with the iPhone be careful of the caching that Safari does. Make sure you clear the cache and also close down any running instances of Safari before trying again.