add image in header

1) I added an submarine image on header, in desktop see it ok, but in tablet & mobile not see.
Which lacks to be seen?

2) A code for movement the submarine from right to left (from: - to:) set it to override or toggle same.
¿With animation'll have the same problem for display devices?

Thank you for your help

http://www.graphictime.com.co

Hi

1. Position of this submarine image is hardcoded:

Code: Select all

<div style="position:absolute; left:400px; top:425px; width:161px; height:161px ">
<img src="/images/demo/submarinito-01.png">
</div>


I'm afraid I do not know what do You want me to do with it if it's attached like that.

2. I do not understand. Can You try explain a little better ?

Submarine it looks perfect in desktop.
but NOT visible in tablet and phone.
see you please

http://www.graphictime.com.co

2) Submarine enter by the left and stopped where it is now, by animation css., by animation css.
¿where I put the code?

Hi

I understand now, but I'm afraid there is not much I can do since it's set in-style. Please send me an access to joomla panel. I need to make some changes before I would be able to develop a code to reposition it.

send access PM

Hi

I removed the in-style from module and added this css to override.css

Code: Select all

.submarine {
    height: 161px;
    left: 20%;
    position: absolute;
    top: 40%;
    width: 161px;
}

@media only screen and (max-width:980px) {
.submarine {
    left: 13%;
    top: 13%;
}
}

@media only screen and (max-width:800px) {
.submarine {
    height: 100px;
    left: 10%;
    position: absolute;
    top: 22%;
    width: 100px;
}
}


thanks teitbite.