How to add or modify css properties to interchange short code using Foundation 5

Question

I am trying to learn Foundation 5 and am experimenting with Interchange.

I used the default short code provided and have successfully gotten my images to swap per layout.

I am wondering if it is possible to change the CSS attributes such as modify margins or border colors (for example) to the images that are being switched, so I guess it might be something added to the interchange short code?

I tried adding CSS properties to stylesheet, i.e:

div.small-12 div.logo img {border:1px solid blue;}

div.medium-6 div.logo img {border:1px solid red;}  

The result is always last declaration. Maybe it's my CSS.

At any rate any feedback would be greatly appreciated.

Answer 1

Your CSS would do the job if Foundation added/removed classes to elements in HTML - but it (mostly) works the other way round - you add the classes to elements, and Foundation uses some (complex) CSS to style them.

What you want can be still achieved tho - using the 'media queries' that foundation uses:

Assuming you haven't altered the default Foundation media queries, the following CSS may do the job for small & medium screens:

 @media only screen and (max-width: 40em) {
        img.my_class {border:1px solid blue;}
 }

/* ... will apply blue border on small screens */

@media only screen and (min-width: 40.063em) and (max-width: 64em) {
        img.my_class {border:1px solid red;}
}

/* ..will apply a red border for medium screens */

.. then apply the class name my_class to the img element in your HTML

I would recommend looking at SASS (if you haven't already) - it makes doing these type of things much more simple :) theres a few good videos that will help, on the Foundation website