Image SVG in header-front RESTAURANT Template

Hi, would need add a svg image in the module Header - Front.
between:
Bienvenidos a El Espacio Mágico

Jardines de Franchy

and:

C / Viera, 30, La Orotava, Tenerife, 922 33 37 13
11am - 11pm, Monday to Friday

Code: Select all

<img src="images/portada-jardines-franchy.jpg" alt="Jardines de Franchy" class="parallax-img" />
<div class="gkPage">

<i class="gkicon-dinner big-icon" data-sr="enter bottom and move 50px"></i>
<h1 data-sr="enter bottom and move 50px">Bienvenidos a El Espacio Mágico</h1>
<p data-sr="enter bottom and move 50px and wait .2s">Jardines de Franchy</p>

<<<<<<<<HERE>>>>>>>>>>

</div>
<sub data-sr="enter bottom and move 50px and wait .3s">C/ Viera, 30, La Orotava, Tenerife, 922 33 37 13<br />De 11am – 11pm, lunes a viernes</sub>

http://www.espaciobodaseventostenerife.com/

Image SVG 90x118px

Thanks

You would need to edit module which renders this code. It's "Header - Front" module in header position.
Please disable tinyMCE editor in global configuration (change editor to "editor - none") before editing.

Thank you very much.
The module to be longer edit knew, so I ask it helps to know that css I put in the code, since the SVG image is too big for me.

Could you please post an url to your site where I could see the issue?

The URL is in the first post, now the picture is not placed, I know that css need to respect the size of the svg image 90x118px

I need to see the image placed to provide correct css.

Image posted thanks
http://www.espaciobodaseventostenerife.com/

Could you please add a svg class to that element? We need to differ it from image that is used as a background.

ready

Please edit: /templates/gk_quark/css/override.css and add at its end:

Code: Select all

div.svg img {width: auto; height: auto;}


Remember to enable "CSS override" in template settings - advanced section.

Not work for me see de image

Hey,

If you add !important after the rules it works. Just then need to do positioning.

Code: Select all

div.svg img {width: auto; height: auto;}

Change to

Code: Select all

div.svg img {width: auto !important; height: auto !important;}

Solution provided by @mjranim should do the trick.

in the mobile view, the image is too large, it is possible to solve them.
thanks

Hey,

If you add !important after the rules it works. Just then need to do positioning.

Code: Select all

div.svg img {width: auto; height: auto;}

Change to

Code: Select all

div.svg img {width: auto !important; height: auto !important;}

you can use css media queries:
https://css-tricks.com/snippets/css/med ... d-devices/
and define width and height for different browser sizes.