Skip to main content
daveharr1s0n
daveharr1s0n
Inspiring
March 3, 2017
Answered

How do I use different logo sizes (responsive) on Skeleton format?

  • March 3, 2017
  • 1 reply
  • 1223 views

Hello all,

I have been trying to learn how to put together responsive sites using the Skeleton boilerplate. Skeleton: Responsive CSS Boilerplate​ It's going well, pretty straight forward, but I'm trying to figure out how to code for different versions of a logo for different orientations and devices. Anyone know how to do that? Media queries, I would imagine, but how does one go about changing or adding to the existing CSS?

Any ideas? Thanks!

Dave

      This topic has been closed for replies.
      Correct answer BenPleysier

      Media queries are useful when using background images as in

      /* For width smaller than 400px: */

      body {
          background-image: url('img_smallflower.jpg');
      }

      /* For width 400px and larger: */

      @media only screen and (min-width: 400px) {
          body {
              background-image: url('img_flowers.jpg');
                }
      }

      For foreground images it is best to use  <picture>-<source>-<img> combination as in

      <picture>

        <source srcset="img_smallflower.jpg" media="(max-width: 400px)">

        <source srcset="img_flowers.jpg">

        <img src="img_flowers.jpg" alt="Flowers">

      </picture>

      The examples were copied from Responsive Web Design Images. If you Google the subject 'picture element' you will come across articles like Built-in Browser Support for Responsive Images - HTML5 Rocks

      1 reply

      BenPleysier
      Community Expert
      BenPleysierCommunity ExpertCorrect answer
      Community Expert
      March 4, 2017

      Media queries are useful when using background images as in

      /* For width smaller than 400px: */

      body {
          background-image: url('img_smallflower.jpg');
      }

      /* For width 400px and larger: */

      @media only screen and (min-width: 400px) {
          body {
              background-image: url('img_flowers.jpg');
                }
      }

      For foreground images it is best to use  <picture>-<source>-<img> combination as in

      <picture>

        <source srcset="img_smallflower.jpg" media="(max-width: 400px)">

        <source srcset="img_flowers.jpg">

        <img src="img_flowers.jpg" alt="Flowers">

      </picture>

      The examples were copied from Responsive Web Design Images. If you Google the subject 'picture element' you will come across articles like Built-in Browser Support for Responsive Images - HTML5 Rocks

      Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
        pziecina
        pziecina
        Legend
        March 4, 2017

        Just like to say thank you for posting this Ben

        BenPleysier
        Community Expert
        BenPleysierCommunity Expert
        Community Expert
        March 4, 2017

        Thank you for the feedback.

        In an endeavour to reduce file sizes and the number of HTTP requests, all in an effort to reduce band width, I initially overlooked the importance of images. I have now come to the conclusion that compressing a CSS file to save a few KB's is nothing compared to the savings to be had when using correct image optimisation and deployment.

        There is still a lot of work done in this area, especially SVG's

        Have you had a look at WebP - Wikipedia?

        Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
        Terms & ConditionsAccessibility statement
        Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices