i've got an sporadically issue with the rendering in IE11.
I'ts also pretty hard to describe what actually happens it seems to overlay the background image on some parts of the site. The funny thing hovering an element displays that actual item how it supposed to look like. And not every time just some times.
Did someone else ever discovered this kind of issue? Any solutions?
Link to the Website
Image:
Thanks for your help guys.
Please add this meta Tag to your HTML Header:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Related
I am developing a site which is to also run on mobile devices. I have an issue with both Chrome and Safari on my iPhone 13 Pro Max, iOS 16.2.
The problem is that when I launch my dialog to log in, the content appears to "grow" horizontally, causing what appears to be a "zoom". I have checked every CSS element in my app, and I cannot see anywhere I'm specifying a min-width or anything of that sort that might cause this. Can someone help me pinpoint the issue? Or point me to a resource that can help alleviate this problem?
My site is live here: https://chonk.jambudipa.io
Here is how it looks when you launch the dialog by clicking on "Sign in":
And here is how it looks after pinching to resize the window to fix the size issue, how it should look:
What is going on?? I have tried all sort of meta properties and strange CSS hacks found online, but none of them work.
Ok, so I found a solution in this post.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
Works perfectly!
I'm not sure what the heck is going wrong here. Whenever I preview my site on a renderer like this, example, my site displays differently from an actual phone display. This is making it very difficult to test and adapt for other screen sizes.
I'm doing a mobile-first layout, but everything was working just fine until chrome started acting up (something my department isn't allowed to fix, so that's not an option) which is why I'm resorting to these types of sites. Also, the only other browsers I'm permitted to use are IE and Edge.
Any advice would be appreciated, thanks.
Your page is missing a viewport meta tag in the <head>
Adding <meta name="viewport" content="width=device-width, initial-scale=1"> should make the page render as expected on mobile devices.
I have a custom wordpress theme and I've been trying to debug this issue for days but can't figure it out. Would greatly appreciate your guys help!
On mobile devices - portrait view, the body isn't full width. On desktop browsers it works fine, even when you reduce the browser width to the same size as a mobile device.
Screenshot from my iphone -
Mobile screenshot
I already have this tag in the head -
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
My site - laxgoalierat.com
Edit: As you see the page initially loads on the mobile device with full width however then it adjusts to what is seen in the screenshot.
I've tried playing around with the body CSS. Making body position:fixed makes it expand the full width however then I cannot scroll up and down :(
I'm out of other ideas. Let me know if providing any other details would help.
Thanks in advance, Damon
Your offending HTML seems to be coming from elements similar to this:
<div class="yui-skin-sam avpcw_container">...</div>
I don't know what these are or what they do... But they are the reason for the effects you are seeing.
So a quick and dirty approach would be to apply css to hide either or both of these classes to patch over your problem. For example:
.yui-skin-sam {
display: none;
}
Obviously you need to be sure that hiding these classes is appropriate. I had a quick look to try to work out what they are used for; but didn't get anywhere.
Please take into consideration I am pretty new to programming and only know basic things!
Currently, the header on my shop has not got a width set and works fine on the desktop site > feel free to visit to view www.Part-Box.com
However, when the site is loaded on a mobile device or a tablet, the view changes and the header is cut off > you can test this by resizing the browser on a pc. Basically I want the mobile version and desktop version to be exactly the same. There is currently a zoom on the mobile version and half of the header gets cut off.
I've tried setting the header to have a width of 100% in the css which works but completley rearranges everything in the header, can anyone help? thanks guys.
(it would be a lot easier to understand with pictures sorry)
Solution found by removing a line of code
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Per comments above: the OP wanted their website to look the same on desktop and mobile. That is, no layout re-ordering, re-sizing or re-styling.
To do what you want we need the mobile browser to zoom out so the whole page can be seen. This happens to be what mobile browsers do by default.
The reason this is not happening for you is because you are using a meta tag that is widely used for Responsive Web Design layouts:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Remove that tag from the page and you should see the results you are looking for.
**I realize that this isn't an ideal user experience choice but this is what the OP asked for.
I have a problem with my website, where when opening the site on an iPad it does not scale to full with of all elements, on the right side the page is cropped.
But after zoom out (pinch) the page is displayed as it should.
My site uses this theme:
http://cubicthemes.com/develop/veteranfood/
Developers of the theme cannot help me :-(
I hope someone else can help to solve this (CSS?) issue?
Which generation of iPad giving you trouble?
Try the following
Adjust view port in the head of each page (easy)
<meta name="viewport" content="width=1020px"/>
Or not so easy is to start playing with CSS media tags in style.css