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

        O
        osgood_
        Legend
        May 12, 2017

        pziecina  wrote

        Just like to say thank you for posting this Ben

        Never going to work unless the website is completely controlled by the web-developer. As said before no client who uploads images via a CMS is going to mess around sizing up 3 images correctly. Resizing on the fly is possible but its a 'design hack' in terms of layout as the images will never be cropped at their best on tablet or smartphone.

        The correct cropping of an image can only be done manually, anything else is a failed concept in my opinon. Just putting it out there so people dont think this is the 'holy grail' solution for responsive images.

        The only solution for faster download on mobile devices is faster download speeds and lower bandwidth prices. Maybe they will come maybe they wont but until they do this is a grey area which can only be controlled by those that are willing to spend time optimising and cropping images across the devices manually. I cant see myself doing that for 200 images as you will end up with 600 'uniquely' sized/cropped images to manage, madness. Might be ok for a site with a few pages and limited number of images, for anything else its a non-starter.

        Terms & ConditionsAccessibility statement
        Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices