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.
Related
I work on a school project that has a website. The website is made by other graduated students and I have almost no HTML or CSS knowledge.
I want the website to be more mobile friendly, meaning that every frame and object gets resized according to what display size you have. Now there is text outside the display, iframes being too big, e.t.c. I have tried to fix this for hours by searching online without any major results.
The thing I've discovered is that changing from overflow-x: auto to overflow-x: hidden (in a CSS file) can help to remove overflow/bleed.
If you have any tips on how I can improve this page it would be strongly appreciated. Feel free to inspect the code using browser tools (CTRL+SHIFT+I).
How do I resize iframes, text, images, e.t.c. according to the width and height of the display?
Why is the footer text outside of the screen, and how can I fix it?
https://www.w3schools.com/css/css3_mediaqueries_ex.asp
read this, you can also use bootstrap grid to make things easier
For skips the most of overlaps that could occur in the page, try to use the configuation below:
html, body {
// reset the browser config
margin: 0;
padding: 0;
}
* {
box-sizing: border-box; // padding and border will not be added to width and height calc
}
img {
max-width: 100%; // protect from images be more large than the container
}
// https://www.w3schools.com/cssref/css3_pr_box-sizing.asp
box-sizing: border-box; will help you in mostly cases, but in some cases, after you inspect the element with overlap width, will can use the calc() to fix it, like:
element {
width: calc(100% - 30px);
}
In you case at https://aqpi.se/karta.html the problem is you setting a fixed width on the iframe element.
With overlap
Without overlap
Responsive web sites are created with media queries: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp.
I'm trying to make my wordpress site always display with 100% width. My wordpress-css has no mobile specific css. When I visit the site on mobile, the site is not longer 100% width, despite the css saying that it should be. I'm currently testing stuff in the css and therefore not linking the site.
EDIT: I now tried removing all width-specifications in the entire css, the word "width" is not present anywhere in the css. The html still locks to exactly 320 pixels, same as the width specified by the iPhone4. This could be an issue with wordpress and not the css file.
The really weird thing is that if I scale up the window, and then scale it back down, it looks like it should look:
This is the css:
body, html {
font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
margin: 0;
padding: 0;
color: #333;
min-width: 100%;
margin: auto;
}
I have the viewport-thing at the top of my html:
<meta name="viewport" content="width=device-width">
However I have not been able to add the "initial-scale=1" into the wordpress html. From what I read I doubt that this is the problem though.
Any suggestions what could be wrong? As a sidenote: It does fail to display 100% width on an actual mobile device as well, it's not just the chrome device simulator failing.
A hint could be that it seems that even wordpress itself misjudges the width of the screen, as can be seen by the wordpress header not filling up 100%
By request of rsn, I will sum up our discussion as an answer. Creds to rsn and everyone else for finding the issue!
In this case, the width itself is set properly. The problem is that things move outside the 100% width and the site tries to scale everything down to fit the stuff moving outside of 100% width. This caused everything else to scale down, including the font size of the text which I thought was an entirely different problem. So, after specifying:
.img {
max-width: 100%;
}
The site worked fine. Except for one last detail, I also has a really long link that, despite having word-wrap: break-word, ended up being wider than the width. To solve this I added:
.long-link {
word-break: break-all;
}
And now nothing moves outside the 100% width, and everything works as it should.
This is the weirdest thing I've ever seen.
I have a class of div that has a background-image, defined as such:
background-image: url("circle.png")
background-size: contain
You can see the divs here: Rouvou.com/fiction. They're called .circle-blue or .circle-red and both classes behave identically.
So here's where it gets weird: on a Lenovo ThinkCentre machine with a ThinkVision monitor, using Firefox, they "pulsate" rapidly, or grow by a pixel in width and height rightwards and downwards, and then shrink again, very rapidly, like a flicker.
Since the Lenovo is a school computer with only two browsers installed, the only other browser I could test it on was IE, in which this behavior was not found. I wish I could post video here to show it, but here's a screenshot of one of the divs:
I've tested it on almost every browser on many other types of machines, and the only place I've ever found this behavior was Firefox on a Lenovo ThinkCentre, with a ThinkVision monitor. I also tested like 20 different ThinkCentres, and this error displayed on every single one.
Has anyone run into anything like this before? What could possibly be causing it? Can anyone at least reproduce the problem on their machine/browser?
I'm using Firefox 31.0, if that matters.
I cannot test it without access to one of these machines, but after looking at your page, I can say with 99% certainty that the issue is actually the background-size: contain part of the rule below. Firefox was only beginning to support that with that browser version, and it may have still been a bit buggy.
(http://caniuse.com/#feat=background-img-opts)
The other thing that leads me to believe this is the case is when that rule is not applied, the background image expands to the right and down as you described.
The fix, since the size of these dots do not change when re-sizing the page, would be to re-size the image manually in Gimp or Photoshop to the correct size, and not try to do it on the fly. This little cleanup will make a minor improvement overall loading/rendering of the page as well.
If you do need the image to resize, your options are using an img tag with a width: 100%; height: auto and overlaying the text over the top, or making a larger image that just has the two-tone colors and the horizontal slash. I would probably just make this all a square image, then add that as the background-image with the position set at center/center (to keep the slash in the correct spot if you need to resize) and set a border-radius on the div to 50% of the div size, making it once again, a circle.
#category .category-thing .category-thing-right-wrapper-wrapper .category-thing-right-wrapper {
display: inline-block;
position: absolute;
width: 57px;
height: 57px;
background-size: contain;
}
I believe it's just the version of Firefox you are running. For example I had trouble with HTML 5 validation with Firefox. The version of Firefox with the graphical error was 22.0, when I viewed the same thing on my laptop, using version 38.0.1, it was in the correct place. I think Firefox was just slower to implement certain things and had no way of accomplishing certain aspects without updating the browser.
I think that the same thing is happening in your scenario. Whereby those images are stylised in such a way that your version of Firefox does not fully support; it tries it's best to show them to you but just can't do it properly.
I tested several of the css properties by going on respective w3schools pages and the only style that seemed to have any sort of graphical error was background-size:contain. However, this only happens on an even earlier version of Firefox, which may not be the same as the one you are running.
I went on this Firefox website and it says that you need:
a browser that supports scaling background images (such as Firefox 3.6 or later)
to use background-size:contain;.
Final answer: your version of Firefox does not fully support background-size:contain; so there are some visual errors.
Just a thought, don't know if it'll help since I can't test it on my machine but have you tried setting max-width and max-height on your divs? On inspecting them they only have width and height set.
Try setting them to the same width and height:
max-width: 57px;
max-height: 57px;
You could also try setting the min-height and min-width:
min-width: 57px;
min-height: 57px;
The images are originally 72x72, and you make the browser downscale them to 57x57, yet the GPU might correct the scaling to fit even boundaries (depending on the graphic card your machines have). If so, the rescaling might cause the parent element to resize in order to fit its contents (as you haven't specified the overflow behavior), which will in turn cause a recalculation of the contained element.
Solution: Render the background image as 57x57 taking into account that it will be even rounded, or - preferable if you can - render it as 56x56. You will also make the CSS a bit lighter :)
Can you just clear all the CSS loaded in your browser
CTRL+SHIFT+DELETE
I have a feeling too that there's more than one CSS files pointing to id of the div. You may also update your browser.
First off, this is not the zoom issue that I've seen in other questions. Also, I'm testing this using an iPhone 4, running iOS 6. In working on a mobile project, I discovered an issue with the viewport tag and mobile safari. I distilled everything into code as basic as I could get it. I have there parameters set:
width=device-width
height=device-height
initial-scale=1.0
maximum-scale=1.0
user-scalable=no
It all works fine, until you rotate the screen. Nothing gets resized, and a black bar appears on the right side to fill in the gap (see screenshots). If I remove height=device-height completely, the problem goes away. However, I do need to use this parameter. Otherwise, I will have to ask a different question.
After rotating back to portrait mode, that black bar remains, and I can scroll left and right. This is a very strange issue. Removing width=device-width does something else unexpected. I have the code here if you would like to try it: http://toastd.net/viewport.html
Here are some screenshots:
Here it is working fine in portrait mode:
When rotated to landscape mode
Then rotated back into portrait mode
The meta tag will help define rules for the viewport but you still need to apply visual styling to address the change in orientation. Give these CSS values a try:
body { width: 100%; height: 100%; }
If you'd like a good resource to help continue your project, PhoneGap has a starter app on GitHub that you can fork.
PhoneGap Start
I believe this is a bug on Safari, but I figured out a way to work around it. It has to do with certain elements and their styles. By process of elimination, I narrowed it down to a few "offending" HTML elements. Deleting width: 100%; from some elements and CSS styles, as well as other static widths like width: 120px; would start to get reduce problem. I say "start to reduce", because the margin on the right became smaller, but didn't go away completely. I then started playing with other CSS attributes like margin and padding. After getting rid of some left and right padding from some elements, the problem finally went away. But this wasn't really acceptable, as those styles were there for a reason.
The solution was to wrap everything in a container element, size that appropriately, and set overflow: hidden; in CSS. Setting overflow: hidden; to the body or html tags would work too, but that did funky things with vertical scrolling in Mobile Safari. In my case, there was already such a container element, so all I had to do was add the overflow property to it.
Like I said, I think this is a bug in Safari. When you rotate from Landscape to Portrait, everything should be resized back to fit portrait mode. Visually, everything does look like it was resized properly. However, Safari must have thought something wasn't resized properly, so it displayed the page wider than it really was. This works just fine in Chrome on an Android device. I also added different background colors and borders to highlight which element might be causing the page to stretch beyond the width of the device screen. Visually, there was no apparent culprit.
If you're thinking it might be a width: 100% plus padding issue, I had the same thought. But then deleting either the width or the margin/padding alone should have fixed the issue, which it did not. Not a single element was sitting beyond the edge of the screen. There was nothing but empty space there.
Url for the unruly site: http://chrism.se
After we put it live we discovered that if the viewport is too small for the content, so as to require scrolling, the background image (body-tag, repeat-x) won't extend beyond the initial view, but I can't for the life of me figure out why and how to fix it. A note to bear in mind is that I didn't code the site by myself, since I'm not that Javascript-savvy and the designers wanted some swooshy effects. My senior colleague could surely find a remedy, but he is unfortunately away and I'd like to wrap this up.
The state of the html and css is the same as when I found out about the issue, but I've tried suggestions I've seen on similar questions, mainly revolving around min-width. I don't really understand the difference between background is only as wide as viewport? and my problem?
Full view = i.imgur.com/6aDpN.jpg
Problem = i.imgur.com/X6JVp.jpg
IE does not support min-width so you can use an expression to do the same:
body {
/* fix for most browsers, fill in desired width */
min-width: 1000;
/* IE Version, fill in desired width equal to the min-width, second value with 2px less */
width:expression(document.body.clientWidth < 1000 ? "998px" : "auto" );
}
The closest thing to a working solution I could find was to from #bodyCurrent, #bodyNext:
Remove right: 0.
Add min-width: 1349px.
Looking again, maybe that's good enough.
Tested in Firefox only, using Firebug.
I realize I'm way late to the party, but I ran into the same problem and added a min-width to the body to fix this problem. Since the link you provided still has this problem, I assume you may want more advice. The min-width of the body should be at least as wide as the viewport when horizontal scrollbars appear.
It's easier to see what's happening if you make your viewport small enough for scrollbars and use Firefox's 3D view to see the page. Then you'll see that your region-footer is set to take 100% width of the body element and that the background works fine; however, the body itself is smaller than the overflow from the top part of the page so you get that cut-off looking area when you scroll. So make the body element have a min-width as large as the overflow from the top part of the page and you'll be all set. This is a pretty common problem (I even noticed it on mailchimp for a while).
Add this to the background of div#wrapper:
background:url("../img/home.png") repeat-x scroll 0 0 #1B2E4C;
Tested it in IE7:
html, body {
position:relative;
overflow:hidden;
margin:0 auto !important;
}