I have a pretty weird issue that I can't replicate/ it's hard to debug. Basically I center my header on the screen with
#media screen and (min-width: 1023px)
<style>
.NavBarMain_container__1eIjT {
max-width: 1024px;
margin-left: auto;
margin-right: auto;
}
When I click on on a different page it stays exactly as it is as it should. My manager has the exact same chrome version and has gone into incognito as well and his is shifting by a couple pixels, but the layout tool in inspector is showing exactly the same things. I can't really debug anything because I am seeing something different than him.
What would you recommend to do? I think I can't use margin auto which is really strange. I have never had an issue like this before:
Version 85.0.4183.121 (Official Build) (64-bit)
Never solved why this is a bug but to get around it I used flex instead. Flex relies on margin so not sure why it acts any different. I did a bunch of screen shares and we had the same code when it was margin auto
Related
I'm in the process of making my wordpress website responsive. I have two images on the page I'm working on which I want to set a max-width on of 100% to make them responsive (this is what I did on another website I made and it worked beautifully). However, I have noticed that as I shrink the page in Chrome dev tools the <html> and <body> elements are shrinking to really odd sizes, completely unrelated to the viewport size. Below are screenshots of the and elements, respectively, being hovered over in chrome dev tools:
And, of course since max-width with a percentage value, "Defines the maximum width of the containing block" and the containing blocks here (<html> and body) are resizing themselves in this unusual way, when I set the images to max-width: 100% they base that off the weird size of those elements.
The only CSS I have on these elements is:
* {
box-sizing: border-box;
}
body {
margin: 0;
}
So my question is, where on earth are the <html> and <body> elements getting their size from?
This behavior first began happening a few versions ago in Chrome; try testing your site/screens using FF (Moz/Firefox) responsive dev tools -- my guess is you'll see the results you expect. But this isn't necessarily an issue with Chrome; in my case it has something to do with environment. These days I work mostly with AEM and if I test in auth mode/disabled (or straight-up auth mode) this issue will occur. But if I view the same page live in production = no issue. So my guess (for us at least) is that it has something to do with the CMS or the server setup. I tend to use FF responsive dev tools these days -- give that a try and let us know how you make out.
html, body{
margin: 0; padding: 0; width: 100%;
height: 100%;
overflow-x: hidden !important;
}
Check to see that your zoom level is set to 100% (normal), in your browser.
I just manage to fix the same issue.
The problem is that the text forces the viewport width. You just have to ajust the font size to fix the issue.
I'm working on the responsive part of my website but I'm having a bug with the mobile devices. When I test the responsive on my desktop browser everything works great, but when I test on my iphone this is what happens.
screenshot #1
screenshot #3
I don't know why but the container apply some sort of margin in the right. Already searched everywhere and nothing's fixing it. Already changed the viewport and add a min-width to the body. This happens when I have a 100% width on the main div.
If someone can help me with this i would be very thankful, because i'm trying to fix this for days.
Finally i fixed this problem. After a lot time trying different things I just wrote this css for all the small devices.
#media (max-width: 768px) {
html, body {
width: auto !important;
overflow-x: hidden !important;
}
}
I don't know if it's the best way to do it but solved my problem. I had this bug for a long time, i'm happy it's working now.
Thanks a lot everyone that tried to help me.
Cheers
I am currently experimenting locally with Vantage theme(Wordpress)
Link
I want to set minimum width of the page in order to stop scaling down content when browser window is being narrowed.
It works perfectly on their site (at around 1020px width website stops scaling), and I wonder what is the trick to make it happen.
I have tried going with
min-width:1080px;
And it works nicely, however it crushes admin-bar completely, and plugins like Chrome Ruler. This indicates that this method is plain wrong, however on user-end everything looks nice.
Any other way to do it?
Edit:
Ok, I found the solution.
Adding min-width to body itself does not help, but works when added to:
body.layout-full {
min-width: 1080px;
}
Ok, I found the solution.
Adding min-width to body itself does not help, but works when added to:
body.layout-full {
min-width: 1080px;
}
While browsing the desktop version of my site on a mobile browser (zoomed out to the max) it's showing an extra margin on the right side of the page of aprox. 20px which is not defined so in the css.
As i don't which part of the side is causing this bug im posting the url http://janthoma.ch maybe someone here's knowing an awnser to this little but annoying problem.
This i what I found:
#main {
padding-left: 20px;
width: 100%;
}
Your #main to big now (because of the padding) and braks out of #page.
Working on a page that is viewed in Windows Phone 8, and I noticed an odd behavior. When -ms-viewport is specified with a width or height, then it seems like users can no longer use the touch scrolling behaviors on an overflow:auto or -ms-touch-move:pan-y element.
Anyone encounter this behavior, or aware of any workarounds?
edit: Visit this URL on a WP8 device for a repro: http://fiddle.jshell.net/Vk7SR/3/show/light
Setting the #-ms-viewport { width: auto } may not be acceptable for a number of applications that aspire to present a reactive UI on Windows Phone devices. A working alternative that allows you to set whatever viewport width you desire is to set the following CSS rule:
body, html {
-ms-overflow-style: none !important;
}
I copied the original repro and fix it up with this rule at https://gist.github.com/tjanczuk/7419485. You can also navigate directly to the HTML page with the fix from a Windows Phone device at http://htmlpreview.github.io/?https://gist.github.com/tjanczuk/7419485/raw/9a13fc9ad43f2103d8b9e23e25c7b0672a13385f/gistfile1.html
Setting the width to auto (like below) instead of device-width seems to solve the scrolling issue. I took the source from your page(http://fiddle.jshell.net/Vk7SR/3/show/light/), packaged it as a WP8 app and tried on a Lumia 920.
#-ms-viewport {
width: auto;
}