I am expecting at this keyframe, to grow from fit-content to 100%in 2 seconds.
Can you explain me why it grows immediately?
Jsfiddle
Related
I noticed today a strange behavior of Firefox, which I can not explain. An element (img) which is inside a div box and has a height : 50% will not be half the size of the parent.
Instead it has a size of only 2 - 3 px (the parent is at least 80px high at my resolution). In Chrome everything is displayed as expected.
HTML Code:
CSS:
Have also searched for this behavior on google. The only thing I found was a firefox setting (about:config browser.enable_automatic_image_resizing) for automatic scaling of graphics. But this did not fix the problem.
Thanks for your help!
I have situation like this
Both divs have the same height, image width scales fine but height doesn't. In productLogo class I set width and height to 100% - no results, I also tried with min and max height. Can you tell me what is wrong here?
Take a look at http://benoitfal.com/tess.html on an iPhone and notice how my container div is wrong... It should be 100% width of the browser.
Say your iPhone is like mine 375px wide - this is 100%. Your images are wider than 375px, so the iPhone has zoomed out to show the whole page. The container is still 100% (in my case 375px), which is why your box is only about half of the screen. If you make your image widths 100% instead of their actual size, they will shrink to fit the viewport.
Original solution for desktop:
Your box is 100% width of the browser but you've added padding of 6px to each side. Unfortunately this gets added to the width which is why it's overflowing.
Set box-sizing: border-box on the div and it will fix it.
More about box-sizing here: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
Because this isn't a fully accepted bit of CSS yet, you should use browser prefixes as per the example in the link. If you're using Compass for your SASS, you could use #include box-sizing(border-box).
I'm working on this page and I'm having a issue with the DIV where sliders are. This div#home-slider has a height: 350px as you may notice and it works fine for large resolutions but since the page is responsive, when I resize the window or see the page from a tablet or smartphone a white row appears just below the sliders and it's caused by the height value since it doesn't change. Can any give me a solution for change the height or tell me if there is a CSS solution or hack for this? What would yours do in this case?
Have you tried to change the height to 100%?
I would remove the height declaration.
I would like to know whether its possible to have an element with a percentage width but to the closest x number (i.e. for my case 200).
The reason for this is because I have a fluid div which is set to 90% of the browser window while I have images at 200px that fill the screen, but because of odd sizes like 830px I am left with excess on the right hand side.
I believe some JS could achieve this?
You can use min-width, min-height, max-width, max-height. Play around with JSFiddle.Fiddle