Forums

responsive svg logo

Permalink
Hi,

I built a site based on elemental theme.
I installed this block to handle a svg logo :https://github.com/Mesuva/svg_image...
The svg logo is well displayed but when resizing the page to check its responsiveness (or checking on a smartphone), it appears two times (one resized version over a bigger one).
see here:http://tinyurl.com/lctz9gd and the attached image.
This effect happens only on the homepage, not on any other page, so I can't figure out what happens...

Thanks for any help,
JP

1 Attachment

 
ConcreteOwl replied on at Permalink Reply
ConcreteOwl
In your bootstrap-modified.css file you have this
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}

Try commenting it out
johnpaul5 replied on at Permalink Reply
Thanks for the proposition, but It's breaking the columns layout at large width, and still the logo has the same issue on small widths like smartphones.
ConcreteOwl replied on at Permalink Best Answer Reply
ConcreteOwl
Okay..
In your .ccm-custom-style-headersitetitle declaration, try adding min-width:250px

You will find the declaration inside the head elements as an inline style
johnpaul5 replied on at Permalink Reply
Yes, that is a good workaround, it fixes the logo width. but I still don't understand why resizing an svg logo makes this effect, keeping the large one over the resized one (and especially just on one page).
Anyway thanks for the tip.