- This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
Viewing 3 posts - 1 through 3 (of 3 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Hi there,
I have got some odd behaviour with sizing of SVG elements and I am not sure why it is happening.
http://codepen.io/georgearnall/pen/fzEHl
As you can see in the above pen, the logo is clipped however as soon as go into the inspector and disable & re-enable the height property on the a
the logo displays as it should.
(please ignore the duplicate height & width properties, they are fallbacks generated by my SASS)
Any ideas ?
Thanks
please ignore the duplicate height & width properties
Well… the duplicate height
properties are exactly what is causing the clipping. You have two h1 a
selectors: the first one specifies a height of 9rem
(which seems to work nicely), while the second overrides it with a height of 112px
(which is too short to contain the entire image; and, combined with overflow:hidden
, causes the clipping).
Observe (I commented out the height
in the second rule).
I posted this last night and I think I was just really tired.. the reason is because the ratio of the height and width is wrong which causes the clipping.
Basically height: 7rem;
should have been height:8rem;
. Sorry for my tiredness :/
Mods remove this is you want :)