fluid layout - % values in css makes image disappear -
i'm having issues scaling elements responsiveness.
if using px values, scaling correct , behaves want to. since want mobile css compatible many devices possible, prefer using % values. problem switch px values % values, images/content either disappear or scale small proportions , change x & y position well.
is there known issue cause browsers struggle % values? i've looked around couldn't find describes issue.
example of issue:
.header{ width: 30%; margin: auto; position: relative; } .logo{ background-color: #ff0000; width: 100px; height: 100px; display: inline-block; margin: auto; }
.header{ width: 30%; margin: auto; position: relative; } .logo{ background-color: #ff0000; width: 100%; height: 100%; display: inline-block; margin: auto; }
the behaviour absolutely correct. when use % means part of total width of parent container. in example uses % "take whole available area". parent container has width set. so, gets it's 30% width, there no height added. if add height: 200px; (for example) .header see works expected -> http://jsfiddle.net/krasimir/amxkg/11/
.header{ width: 30%; height: 200px; margin: auto; position: relative; } .logo{ background-color: #ff0000; width: 100%; height: 100%; display: block; margin: auto; }
Comments
Post a Comment