I am trying to fix an image to a certain point in the background image for a project.
I've created a jsbin as I couldn't find the words to explain what I'm trying to accomplish.
http://jsbin.com/esUNEKIM/2/
In the example, the little map pointer is perfectly placed at the tip of the finger in the background image (at my resolution and full screen), but moves when the image scales down.
Any clues?
PS: I need the two images to be separate. I'm open to hacks as this will be a temporary landing page and we don't really care about old IE compatibility here.
Thanks!
Edit: I see it now when I shrink my browser vertically - you'll need to add in vertical media queries (e.g.: http://cognition.happycog.com/article/go-vertical/) or use JavaScript.
I actually didn't see it move when it scaled-down but when it scaled up. For me, 230px seems to work until a given point (around 1600px). Use a media-query to change the right position. It looks to me like 16% seems to work after that point.
#media screen and (min-width: 1600px){
#capsule {
right: 16%;
}
}
If you're still seeing it on scale-down, you can add multiple media-queries to adjust the position.
Related
I have this photo site that I am noodling with and I have an issue with reactive sizing of the browser window. The images look great at 100%, but when I size down the window the landscape images start to resize, which I understand they are sizing down to meet the width of the browser window.
However when I get really small, to mimic a smartphone, I really want these images to stack, as this makes more sense for images that are portrait. So the idea is to go from left to right and then top to bottom when the browser is small. Im kinda rusty at css and I cant remember how to get this done. Can someone please help a brutha out and point me in the right direction so I can get this going? Im doing this all thru my WP override option, so an approach I should follow with just css would be the best, as Im a tard with anything more complex.
the site is here: http://jadanduffinphotography.com/
Thanks!
-Jadan
What I suggest for you to do is:
write css to make the images float: left; and position: relative;inside a container div
detect the orientation of the browser window
according to the orientation, set the width of the container div
This should make the images display horizontally when possible and make them stack vertically when not.
You should take a look at this too probably.
This is good. Don't know what's actually bothering you with the responsive layout but so far your site works great.
If you still do not want that resize/layout on smaller device do remove/edit between lines #7201 - #7509 on this file http://jadanduffinphotography.com/wp-content/themes/heat/style.css
The footer on our website is displaced by 1px on mobile browsers, and we don't understand why.
Here's a screen shot of what it looks like on the iPad. The 1px green line at the top of the footer doesn't appear in desktop browsers -- only on mobile ones (tested on iPhone & iPad Chrome and Safari).
If you would like to see this for yourself, visit www.panabee.com.
Can anyone explain why this is happening?
Thanks!
This is a funky problem. I see it differently on different zoom levels.
Change the last div in #page_box to the following style:
#all_icons {
margin: 60px auto 54px auto
}
And that fixes it for me on iPad at default zoom level.
However, I am seeing it come back at different zoom levels. I'd try swapping out that image with a transparent pixel to see if it goes away. I suspect it is something to do with that image.
I can see the issue on my iPhone 4S running iOS 6.1.3, it does disappear when I zoom in. But I can also reproduce the issue using Google Chrome Version 26.0.1410.64 m. When I zoom in to anywhere above 110% (obviously it is easier to spot at even higher zoom levels) I can see a green line appear for just a little while, which then disappears as the image becomes sharper within a few seconds. At 300% the line doesn't disappear anymore, it will always be visible, and at the same time the image does not become sharper anymore, but then at even higher zoom levels, the line is never there.
Seeing the image becoming sharper and then seeing the line disappear is leading me to believe that the problem might be with the image being saved as an interlaced image. Obviously you might have done this on purpose, as it is not really a bad thing. And in that case you would also know that interlacing an image enables it to be shown as a degraded copy of itself while it has only partially been received by its intended recipient (in this case a visitor on your website).
Now I have never heard of any issues with interlaced images in mobile safari, but doing a Google search did turn up some results. Including a result to a question with some useful answers here on SO. Problems seem to have started with the iOS 6 update. Most problems seem to be fixed by either turning off transparency on the image or by saving the image with the interlacing option turned off.
So I'd suggest you try those options and see if that fixes it. Or if you really need interlacing, maybe use a different image format which supports interlacing (browsers may handle it differently between formats?).
What I find quite interesting is that it seems like Google Chrome doesn't use interlacing on higher zoom levels, I guess it doesn't make sense to try to get the image to be even sharper when you're zoomed in that much already?
I would find it interesting to read some documentation on how different browsers handle interlacing for the different formats which support it. I couldn't really find any (but I didn't have a very good look). It might shed some light on why some issues have started to appear in iOS 6 and higher, to me it looks like mobile safari on iOS 6 does not support interlacing PNG images at all, and since I could reproduce the issue in Chrome, I thought that it might be an issue with WebKit based browsers across the board, but my Safari 5.1.7 does do the right thing on all zoom levels.
Anyway, I hope one of the suggestions will solve your problem.
This looks to me like a rounding error as a result of your web page being scaled.
If you haven't set a viewport metatag on your page, the default viewport width is set to 980 pixels, regardless of orientation. This means that in landscape orientation, when the device width is 768 pixels, the page has to be scaled down to around 78%.
If your page design relies on various parts being aligned with pixel perfect precision, this is bound to fail from time to time. I would expect newer versions of webkit to deal with this sort of thing better, since they recently moved to subpixel layout units, but that won't always help.
Assuming this is the problem, you should be able to fix it by adding a viewport metatag to your page like this:
<meta name="viewport" content="width=device-width">
You would then need to use media queries to adjust your layout to better handle different device widths, since you can't rely on the browser scaling your pages for you anymore.
Even then, though, you can't guarantee that your css pixels necessarily translate to exact device pixels, since some mobile devices may have non-integer device pixel ratios. It should at least fix your problems on the iPad, though, since it has a device pixel ratio of either 1 or 2 (depending on whether you have a retina display or not).
If media queries seem like too much effort, I was going to suggest you just move your #footer_top down a pixel, but it looks like you've already done that. Has that not helped?
I cannot reproduce the problem on my iPad (perhaps you've tweaked something already) but I think you might solve this problem with background-origin: border-box; on #footer_top and #footer.
Try changing your CSS for #footer_top to:
#footer_top{
background: transparent url(/images/footer_header.png) repeat-x center -1px;
height: 72px;
position: relative;
top: 1px;
}
Basically if you pull up the background image by 1px pixel and pull down the div panel by 1px, it should help fix the problem.
Here's the fix:
#footer_top {
background: transparent url(/images/footer_header.png);
height: 72px;
position: relative;
background-position-y: -1px;
}
It has to do with the fact that the backgound is repeating, although oddly enough adding repeat-x does not fix it as it appears to be a repeating the bottom pixel to the top. I've run across something similiar at the edges of images, and I think it's an error in the way webkit does interpolation at the edges of an image. In any rate, all I've done is hide the top pixel, but you might find that placing a single repeating transparent pixel along the bottom MAY fix your issue as well (although in my other project it did not).
I've found StackOverflow extremely useful so thanks for any help in advance.
On http://test2.heyscout.com/, I'm wondering how to properly set up my background-image in my "hero div" for responsive web design. I've been playing around with numerous settings but I'd like it to:
stay in position consistently without jumping around due to browser size (for example, on the mobile phone, it gets misaligned or there's white space where there shouldn't be)
the 'Verify Anyone Offline' doesn't resize properly even though I set it in em
the button looks strange on a mobile device
What is the best practice for keeping the "hero div" in check? I'd surmise it'd have to do something with the min-height or perhaps fixing the dimensions of the actual image. Should I set the height of the hero div in percentage rather than pixels?
Also any advice on how to keep my "trimester div" fill up nicely the bottom 1/3 of the page consistently would be great- I'd imagine when the height of the browser is bigger than expected, it'd look strange. I've read that it's best to keep the height attribute alone for RWD but I'm wondering if there are any tricks to make sure it resizes properly.
Have you looked into Media Queries? Basically, they allow you to set specific CSS based on browser width (and height). This will allow you to control how your page looks at specific browser sizes.
Example - CSS at different widths:
#media screen and (max-width: 600px) {
/* add some CSS here for 600px maximum width*/
}
#media screen and (max-width: 960px) {
/* add some CSS here for 960px maximum width*/
}
To get the background image to always fill the div, use background-size: cover2 unless you need to support IE8.
If your font size doesn't look right across pc/tablet/handheld, try using media queries to set font sizes for specific resolutions.
I'm not sure how to help you with your button "looking strange", except to offer profuse sympathy.
In the future, try to keep your questions more focused. :)
give
background-size:contain;
and this may solve your problem, because it will auto adjust size by contain!
I have very strange situation and I really can't see why ... and how to overcome that.
So I have to place the backgroung image on web site of size 1920x860.
The image ends differently - like: if it is not extended over the whole window, the corners of the image looks strange.
When I tested this in FF, it does not look ok. I tested this on 22'' monitor (thus resolution 1680x ..).
when I test this in Chrome, the image extends good, the corners of the image are not seen.
BUT: I have two monitors, the second is 23'', thus the resolution is not much different of the first one and if I test this page on Crome, is ok, on FF also.
Then I used firebug tool and try to get the innerWidth of the window.
The 22'' monitor has innerWidth 2124px, the 23'' monitor has 1776px.
I would really appreciate if someone can tell me - why this is happening? If someone could have an idea how to place this image to let it extend well on every monitor ... would be even better.
The point is - that I have to extend image from corner to corner and while testing on my monitors, I cannot be sure that other users will see this as I can see :(
Thanks.
I'll make the comments here ... as all of you are so kind I just tried many different solutions. the point is that the image is not cover for whole background - should be seen and at the bottom should just have some color ...
Now I'm using simple background: url() no-repeat top center ..
if I use -cover- the image is extended - but I needed to extended only vertically. I used JS as well, but is not working ok, as the footer is a part of that bg-image ... and become all wired.
Maybe, I'll just use #media .. to set bigger image for bigger screens (and of course will use bigger image) but also this will work only for a bit bigger screens, if not the design will crash, I think.
Let me google that for you (first result for 'css window background'):
http://css-tricks.com/perfect-full-page-background-image/
In a nutshell:
html {
background: url(bg.jpg) no-repeat center center fixed;
background-size: cover;
}
See also: http://caniuse.com/#search=background-size
I've made a simple website that is entirely scale-able...except the images. the body and all, the divs are set to percentages, in fact my purpose for designing this way was to practice making sites that would scale to any screen resolution. Everything went smoothly except the images, while the rest of the page grows or shrinks with the browser, the images either overflow or become tiny(when zooming in and out on browser). setting the image width and height to a percentage doesn't work because stretching the browser too far horizontally or vertically would cause the image to distort.
note:
I'd rather not have to hide the overflow, if I'm correct that would just cut the image off when it becomes to large(correct me if I'm wrong here)
and setting the height/ width to a max/min didn't seem like an ideal solution either.
but this problem seems to be one that I can't believe others have not encountered, so I hope someone can help me figure out a solution. please help, please...this is stressing me out :(
Style the img tag:
img {
height: auto;
max-width: 100%;
}
Now adjusting the size of the element containing the image will cause the image to scale itself accordingly.
Try setting just either height or width, whichever is more important to you. If you set both, the browser will follow your rules. If you just set width, the browser will scale the height down accordingly.
I'm working on a project like this as well, and I used
img { width: 100%; }
as well and then made sure to size the divs around each image accordingly.
I understand your concern about the images distorting at a certain size, but for me the ability to scale was most important here. I created the images so that they looked best at the size for my target audience.
If you create the images at the largest size you want them to look clear, they should also scale down, just be careful about file size if bandwidth is an issue.