I am developing this site: https://angharadportraits.com/
It displays OK on all devices on which I have tested it, and on Chrome emulations of different displays.
EXCEPT - the client uses a Lenovo Thinkpad T450, with a display 1366 x 768px. On Chrome the display appears scrunched up to about a quarter of the intended size. Using IE on the same machine it displays OK! See screendumps below
It is in Wordpress. Initially I based it on the twentyseventeen template but, because of the problem, I rebuilt it on twentythirteen with exactly the same result.
I'd be grateful for suggestions as to the cause and solutions
Display as intended Display on Thinkpad/Chrome
The client is zoomed out on their Chrome browser. (Notice the magnification glass at the right side of the URL address bar).
https://angharadportraits.com/how-it-works/
I checked this link and shrink the screen from my pc and inspect the code the css you have written cause and an issue check this link code where you have max-width issue. You added the child theme in that i see this css 131 line add like this
.entry-content {
width: 60%;
margin-left: 0;
max-width: 100%;
}
you can see layout like this https://www.awesomescreenshot.com/image/3137593/8d6459e40aec6c2a5f19a4f00d0b5379
Try to change your viewport settings to <meta name="viewport" content="width=device-width,height=device-height,minimum-scale=1,maximum-scale=1, , user-scalable=0"> The Lenovo Thinkpad T450 is probably scaling the page.
If you dont have a viewport tag yet you can add the code above between the <head> and </head> tag.
Related
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.
I'm using Yahoo's PureCSS library along with a plugin for the sidebar and it works great on all browsers except mobile Safari. For some reason, it zooms out whenever the menu is opened. This even occurs in the documentation's example. I have no idea what could be causing this but it's tempting to just call it a browser bug.
I can put together a JSFiddle if necessary.
The viewport meta tag does not contain a maximum scale value. If you update the viewport tag to the following, you won't get the same zooming whenever the user clicks on the menu:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Note the addition of maximum-scale=1 to the end of the string. When this is added, the content slides over instead of zooming out. This was tested against the PureCSS demo page for the Responsive Side Menu, linked to above.
This question actually boiled down to being the same as Does overflow:hidden applied to work on iPhone Safari?. I guess Mobile Safari will zoom out to make room for the menu and the content area when the user opens the menu, unless you do this on a wrapper element:
html,
body {
overflow-x: hidden;
}
I have set up a mobile web site of http://www.berlin-ra-kanzlei.de/ ... but for an unknown reason it always seems to be zoomed in just A LITTLE BIT (maybe 1 - 3%?). There is always missing some milimetres of the right side and I can zoom out with a pinch.
It also happens, when I am on the site and clicking another page. It just does not want to show the complete page from the beginning, although I have set the boxes to width: 100%;.
Btw, I have set
<meta name="viewport" content="width=device-width, initial-scale=1">
Without it my layout goes bananas on mobile devices and setting it to a lower initial-scale does not help either. There is till missing a little bit on the right side.
But I do not want to forbid zooming! I just want to have it all seen on initial loading/visiting.
So, I think it has to do with some CSS values or so. Maybe I have set something over 100% width or so? Because if I zoom/pinch out after loading, it works just fine ... until loading another page of the web site, of course.
Thanks a lot in advance, mates.
Set your box model for the the #container and #header divs to border-box:
box-sizing: border-box;
You may need to prefix this depending on what browsers you are supporting.
More info here: http://www.w3schools.com/cssref/css3_pr_box-sizing.asp
i have created a responsive page with bootstrap 3. I am having a problem in all mobile devices, there is long scroll bar coming. Strange thing is it is coming fine in my local machine. Issue is only reproducible in production environment. I have tried every thing but nothing worked.
Using meta tag: <meta name="viewport" content="width=device-width, initial-scale=1">
This issue is making me insane, i am not getting the cause of this issue.
Below is the page url
http://beta.proptiger-ws.com/careers
Even if i remove the entire body tag in consle panel the scroll bar still comes. Let me know if you guys need any other detail.
I am updating this question my new finding are this page is not becoming responsive thats why the scrollbar is coming. dont know what is wrong with the viewport meta as same page working fine on my local machine.
That site is not responsive if you have set widths
Search for the class below and change.
#media (-webkit-min-device-pixel-ratio: 1) and (max-width: 768px)
.mainContainer, .footer-container, .footer-cont-info, .copy-container, .searchFilter {
width: 100%;
}
Be sure to do a hard refresh when editing in external css files (ctrl + F5)
Check the css for min-width.
If there is any element with min-width greater than the page then it would produce a scrollbar.
I’ve been using display: none; on a site I’m designing now. So when I load the page on the mobile to see the progress, everything works fine. What I do is when css detects the device width of a mobile, it activate the display: none; of an element. But there’s something I don’t understand.
The first time the page loads (google chrome) on the smartphone (portrait mode), the element is hidden. When I rotate the screen(landscape mode), it’s still hidden. But when I rotate it again (portrait mode), there is when the element appears that is supposed to be hidden. Anyone can explain this?
Device: HTC One – Google Chrome browser
Solution: add this code to the header
<meta name="viewport" content="width=device-width, initial-scale=1.0">
And don't use #media (min-device-width) or (min-device-height), instead just make use of (min-width) or (min-height) and start from there. It will take a lot of headache when developing for mobile or tablets.