0

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.

MasterAM
  • 16,283
  • 6
  • 45
  • 66
user3494825
  • 5
  • 2

1 Answers1

0

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

user2671791
  • 16
  • Thank you, that helps a ton. And yes I am very excited to start learning sass. As soon as I get the basics of Foundation down. Thanks again! – user3494825 Apr 04 '14 at 18:12