I would like logo.png only visible on mobile version

Hello everyone,
I am building a site from the publisher template and would like to have the logo appear only when the width of the device is small (smartphone layaout).

I have seen that the file decoration_left.png and decoration_right.png could disappear when we reduce the window of the navigator or if seen on a smartphone, that is great. And then, the logo.png stays in place.
What I would like to do is make the logo appear ONLY when decorations_left.png and decoration_right.png disappear, because I already have an instance of the logo in decorations_left.png.
Here is a link to the site : http://www.graphicom.tm.fr/oasis/
Thanks for your help.
Kris

Please add this code to override.css:

Code: Select all

@media (min-width: 581px) {
    #gkLogo {display: none;}
}


Great ! Thanks a lot. That works exactly like I wanted.
Because I love to learn and like to be able to do things by myself (and may be others), could you explain why the simple @media is enough to have it visible. Where is the condition (css, php ?) ?
Or is there a link to an article, a knowlege base... that explains that ? Because I guess it is not the same code for a template from another company.

Thanks for your time for sharing.

Kris

1. override.css in our templates is loaded as a last css file so declarations in it, whenever they are same as in any other css file - override other declarations, so if you see somewhere:

Code: Select all

#element {width: 100px;}


and paste into override.css:

Code: Select all

#element {width: 10px;}


the last one will be in use (no need for !important if it is not used in default declaration).

Now, if it goes to media - I have used chromedevtools to find out at what screen size decorations_left.png and decoration_right.png shows - it was at 581px, so I have created @media breakpoint that catches all screen sizes equal and above 581px:

Code: Select all

@media (min-width: 581px) {

}


This is something like css conditional. Now inside I have hidden logo element so it is invisible only for lower screen sizes.

If you want to know more, read about css3 media queries as there is a lot more to know .

That is a really a very efficient explanation. I will have a look at cc3 media queries.
Thanks a lot for your sharing.
Kris

No problem.
Is there anything else I can help you with regarding this topic?

Thanks nothing more. I just need some help on another problem on this template :
http://www.gavick.com/forums/publisher/unwanted-texte-under-the-search-zone-38638.html

Please check as bkrztuk mentioned - if your template isn't outdated.