1 Reply Latest reply on Sep 6, 2012 7:33 PM by mytaxsite.co.uk

    Making images and text scalable in fluid grid

    ladobeugm Level 1

      So I'm creating my first Fluid Grid design and I'm having issues with making images scalable and look appropriate. Take a look at this example and the four social media icons on the top right. They're in one div id called sociaLinks. I have in my style_fg.css that the img attribute is set to 3em but that doesn't make the image scale as you resize the browser. I tried doing something like 25% (actually, a little less and I used that figure since there's four images in the div) and that worked in Firefox but in Chrome and Safari, it just appeared as what might as well have been a dot. So how can I make it where the multiple images can scale with the browser?

       

      Likewise, I have a similar issue with making text do the same thing. In this case, my #access div which I'd like the font to resize with the browser. Any ideas on making that work?

        • 1. Re: Making images and text scalable in fluid grid
          mytaxsite.co.uk Level 6

          You can make images scaleable using CSS3 like this:

           

           

          div

          {

          background-image:url('mypicture.png');

          background-repeat:no-repeat;

          background-size:cover;

          }

           

          You can also use vendor specific code to make this code compliant in browsers that don't have css3 yet:

           

           

          /* Safari,Chrome */

          -webkit-background-size: cover;

          /* Seamonkey */

          -moz-background-size: cover;

          /* Opera */

          -o-background-size: cover;

           

          Hope this helps.