Announcement

**feemish** · 10-Feb-2015, 08:27 PM

Are you using the logo defined in settings:site options:general ?

I put a logo in there and it gets resized automatically depending on the size of the browser window.

**malbro** · 10-Feb-2015, 09:43 PM

Originally posted by Buzby View Post

Just playing around with the new responsive designs and note that we have to make our logo quite small for it to display on my phone, but in turn it is also too small when viewed on my desktop PC.

Is there a way to show different size logos depending on what the device the site is being viewed on?

The corporate logo is sized at 310 x 114, this size is set to suit the re-configuration of the web pages to suit the device being used, if you stick to a logo within that frame size the responsive design will work best. It doesn't have to be an exact fit just resize your logo to fit inside those dimensions. Change the settings under site settings to use your new logo or replace the existing logo with your own.

The responsive code is designed to leave sufficient space for that size of logo and will correctly handle the changes as the device type changes.

**Buzby** · 11-Feb-2015, 02:35 PM

Many thanks for your replies.

The image is 400px and is overhanging the layout on my iphone.

Sizing the image to suit does make sense, however it then looks lost on a desktop.

Just wondered if there was a way to have 2 sizes, and showing the correct one depending on what it is being viewed on.

I'm sure this can be done as other elements change on the design as the browser size changes.

**graphicz** · 11-Feb-2015, 04:33 PM

Hi Buzby

I add some code from my beloved Skeleton to the SD css:

Code:

/* #Base 960 Grid
================================================== */

    .column, .columns                         { float: left; display: inline; margin-left: 10px; margin-right: 10px; }

    /* Nested Column Classes */
    .column.alpha, .columns.alpha               { margin-left: 0; }
    .column.omega, .columns.omega               { margin-right: 0; }


    /* Base Grid */
     .one.column,
     .one.columns                     { width: 40px;  }
     .two.columns                     { width: 100px; }
     .three.columns                   { width: 160px; }
     .four.columns                    { width: 220px; }
     .five.columns                    { width: 280px; }
     .six.columns                     { width: 340px; }
     .seven.columns                   { width: 400px; }
     .eight.columns                   { width: 460px; }
     .nine.columns                    { width: 520px; }
     .ten.columns                     { width: 580px; }
     .eleven.columns                  { width: 640px; }
     .twelve.columns                  { width: 700px; }
     .thirteen.columns                { width: 760px; }
     .fourteen.columns                { width: 820px; }
     .fifteen.columns                 { width: 880px; }
     .sixteen.columns                 { width: 940px; }

     .one-third.column                { width: 300px; }
     .two-thirds.column               { width: 620px; }

    /* Offsets */
     .offset-by-one                   { padding-left: 60px;  }
     .offset-by-two                   { padding-left: 120px; }
     .offset-by-three                 { padding-left: 180px; }
     .offset-by-four                  { padding-left: 240px; }
     .offset-by-five                  { padding-left: 300px; }
     .offset-by-six                   { padding-left: 360px; }
     .offset-by-seven                 { padding-left: 420px; }
     .offset-by-eight                 { padding-left: 480px; }
     .offset-by-nine                  { padding-left: 540px; }
     .offset-by-ten                   { padding-left: 600px; }
     .offset-by-eleven                { padding-left: 660px; }
     .offset-by-twelve                { padding-left: 720px; }
     .offset-by-thirteen              { padding-left: 780px; }
     .offset-by-fourteen              { padding-left: 840px; }
     .offset-by-fifteen               { padding-left: 900px; }


/* #Tablet (Portrait)
================================================== */

    /* Note: Design for a width of 768px */

    @media only screen and (min-width: 768px) and (max-width: 959px) {


         .one.column,
         .one.columns                     { width: 28px; }
         .two.columns                     { width: 76px; }
         .three.columns                   { width: 124px; }
         .four.columns                    { width: 172px; }
         .five.columns                    { width: 220px; }
         .six.columns                     { width: 268px; }
         .seven.columns                   { width: 316px; }
         .eight.columns                   { width: 364px; }
         .nine.columns                    { width: 412px; }
         .ten.columns                     { width: 460px; }
         .eleven.columns                  { width: 508px; }
         .twelve.columns                  { width: 556px; }
         .thirteen.columns                { width: 604px; }
         .fourteen.columns                { width: 652px; }
         .fifteen.columns                 { width: 700px; }
         .sixteen.columns                 { width: 748px; }

         .one-third.column                { width: 236px; }
         .two-thirds.column               { width: 492px; }

        /* Offsets */
         .offset-by-one                   { padding-left: 48px; }
         .offset-by-two                   { padding-left: 96px; }
         .offset-by-three                 { padding-left: 144px; }
         .offset-by-four                  { padding-left: 192px; }
         .offset-by-five                  { padding-left: 240px; }
         .offset-by-six                   { padding-left: 288px; }
         .offset-by-seven                 { padding-left: 336px; }
         .offset-by-eight                 { padding-left: 384px; }
         .offset-by-nine                  { padding-left: 432px; }
         .offset-by-ten                   { padding-left: 480px; }
         .offset-by-eleven                { padding-left: 528px; }
         .offset-by-twelve                { padding-left: 576px; }
         .offset-by-thirteen              { padding-left: 624px; }
         .offset-by-fourteen              { padding-left: 672px; }
         .offset-by-fifteen               { padding-left: 720px; }
    }


/*  #Mobile (Portrait)
================================================== */

    /* Note: Design for a width of 320px */

    @media only screen and (max-width: 767px) {

         .one.column,
         .one.columns,
         .two.columns,
         .three.columns,
         .four.columns,
         .five.columns,
         .six.columns,
         .seven.columns,
         .eight.columns,
         .nine.columns,
         .ten.columns,
         .eleven.columns,
         .twelve.columns,
         .thirteen.columns,
         .fourteen.columns,
         .fifteen.columns,
         .sixteen.columns,
         .one-third.column,
         .two-thirds.column  { width: 300px; }		

        /* Offsets */
         .offset-by-one,
         .offset-by-two,
         .offset-by-three,
         .offset-by-four,
         .offset-by-five,
         .offset-by-six,
         .offset-by-seven,
         .offset-by-eight,
         .offset-by-nine,
         .offset-by-ten,
         .offset-by-eleven,
         .offset-by-twelve,
         .offset-by-thirteen,
         .offset-by-fourteen,
         .offset-by-fifteen { padding-left: 0; }
		.pleft {padding-left:0;}
    }


/* #Mobile (Landscape)
================================================== */

    /* Note: Design for a width of 480px */

    @media only screen and (min-width: 480px) and (max-width: 767px) {

         .one.column,
         .one.columns,
         .two.columns,
         .three.columns,
         .four.columns,
         .five.columns,
         .six.columns,
         .seven.columns,
         .eight.columns,
         .nine.columns,
         .ten.columns,
         .eleven.columns,
         .twelve.columns,
         .thirteen.columns,
         .fourteen.columns,
         .fifteen.columns,
         .sixteen.columns,
         .one-third.column,
         .two-thirds.column { width: 420px; }		
    }

Then add one more line to the css such as:

Code:

.undred img {
max-width:100%;
height:auto;
}

Then in your classic layout look round your logo image for:

Code:

<div class="logo">
<span class="set-left">
<a href="index.html">
<img class="logoimage" width="307" height="80" border="0" title="Sample Company Online Catalogue" alt="Online Catalogue" src="theme_corporate_logo.gif">
</a>
</span>
</div>

and change it to:

Code:

<div class="logo six columns undred">
<span class="set-left">
<a href="index.html">
<img class="logoimage" width="307" height="80" border="0" title="Sample Company Online Catalogue" alt="Online Catalogue" src="theme_corporate_logo.gif">
</a>
</span>
</div>

six columns is 340px in desktop, you can go more or less, the 'undred' code overrides the width set in the image layout and the image will respond to the device it is being viewed upon. You probably don't need the span set left as the columns style has float left in it.

**Buzby** · 11-Feb-2015, 06:37 PM

Many thanks Jonathan, you are a star.

I always feel that Sellerdeck never quite finish anything with this being a perfect example.

I will have a play.

Announcement

Responsive Design

Responsive Design

Comment

Comment

Comment

Comment

Comment