0

I've created two versions of logo, a vertical and a horizontal one, the first for mobile screens, the second for desktop, to swap from one to another I need picture element. Unfortunately I've failed to implement it both in Dreamweaver, and Sublime text editor. The only thing I've noticed after hours of research, is that it only works with dummy images (placehold.it). Even more the problem seems to be the srcset attribute (which fails to display anything, no matter what is the browser), in contrast with the src attribute which seems to display the source image correctly. Any kind of help would be most appreciated! (code follows) 

<picture>
 <source media="(min-width:600px)"
         srcset="assets/desk/logo horiz.png"/>
 <img src="assets/mob/logo vertical.png"/>
</picture>
Yiannis
  • 1
  • If it works with dummy images then it's something about your relative **src** attributes. Probably the space in the name file. Try renaming your images as `logo_horiz.png` and `logo_vertical.png` or [encode](http://www.w3schools.com/tags/ref_urlencode.asp) the space as `%20`. Also check if your relative path is correct. – Jordi Nebot May 03 '16 at 11:50
  • I could never thank you enough Jordi !!! the underscore format worked! – Yiannis May 03 '16 at 12:31

1 Answers1

0

This is best done with CSS and media queries. In your CSS, first set an image for the mobile version of your logo, then with a media query you override the first logo for different screen widths, like this example uses a different logo when the screen is 641px or wider:

.logo {
    height: 50px;
    width: 100px;
    background-image: url(images/logo.png);
    background-repeat: no-repeat;
    background-position: left top;
}

@media screen and (min-width: 641px) {
.logo {
    height: 100px;
    width: 200px;
    background-image: url(images/logo2.png);
}
}
Slingshot Design
  • 46
  • 4