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!
        daveharr1s0n
        daveharr1s0nAuthor
        Inspiring
        May 12, 2017

        Sorry for the delayed reply, Ben. But THANKS for the tips! Exactly what I wanted, although I have yet to use as I haven't quite figured out how I want to use, as far as logo-variation. Haven't been doing much in working on that responsive site lately -- too busy with the day job. But I was reminded of my design hurdle the other day when I saw how a big name e-commerce site (which shall remain nameless (hint, named after a big river in South America) looks on my phone -- aesthetically, not much to look at, but I know it does the job.

        Anyway, looking forward to starting up again where I left off. Thanks again.

        Dave

        O
        osgood_
        Legend
        May 12, 2017

        daveharr1s0n  wrote

        But I was reminded of my design hurdle the other day when I saw how a big name e-commerce site (which shall remain nameless (hint, named after a big river in South America) looks on my phone -- aesthetically, not much to look at, but I know it does the job.

        Thats ok for Amazon because its a well establish website. But for a couple of smaller local companies in competition with each other the look of the website on mobile maybe more important to consider.

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