Layout for logo and title

• 

  mchild · Member · Jul 27, 2014 at 7:36 am

  • Copy link
  • Add topic to favorites

  I want to have the title and description to the right of the logo instead of underneath it. Since the title is an h1 and the logo is an image, their placement is defined in the html so I don’t think I can change it by adding css. Is there any way to do this, or do I have to do it as a banner image instead?

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Jul 27, 2014 at 2:56 pm

  • Copy link

  Hi there, I’m not seeing a logo image on the site you referenced, starbytesmec.wordpress.com. Do you have your logo uploaded to your media library? If so, what is the URL of that image?

  What might be best in this case would be to add your logo directly in the CSS instead of using the “header” area.

• 

  mchild · Member · Jul 28, 2014 at 9:55 am

  • Copy link

  oops, sorry, that was the wrong url.
  http://starbytespress.wordpress.com/

  I also want the logo to be bigger than the default 220 x 220 px.
  By putting it in the css, do you mean making it a background image for the site-branding div? And then would I need to use the css to give a relative position to the site-title h1 (moving it to the right)?

  thanks

  <div class="site-branding">
          <a rel="home" href="https://starbytespress.wordpress.com/">
              <img class="site-logo attachment-motif-logo" width="220" height="220" data-size="motif-logo" alt="Logo_Starbytes" src="https://starbytespress.files.wordpress.com/2014/07/logo_starbytes2.png?w=220" originalw="220" scale="1.5"></img>
          </a>
          <h1 class="site-title"></h1>
      </div>

• 

  thesacredpath · Member · Jul 28, 2014 at 2:11 pm

  • Copy link

  No problems. Give the following a try. It uses a media query to limit this change to browser/device widths greater than 600px, which is where the menu changes to the minified menu and the logo centers with the title below it.

  @media screen and (min-width: 601px) {
      .site-title {
         width: auto;
         position: relative;
         left: 120px;
         top: -85px;
  }

• 

  mchild · Member · Jul 29, 2014 at 9:10 am

  • Copy link

  Thanks, that worked! And still looks good on my phone where it drops underneath.
  Could you please tell me how I can change the logo size, say to 280 x 280 px?
  thanks very much

• 

  thesacredpath · Member · Jul 29, 2014 at 5:08 pm

  • Copy link

  Hi, you can use the CSS transform: scale declaration. I used 1.3 in the example below as 280 is 1.3 times 220 (approximately). There will be a slight loss in image quality, but it still looks pretty I think.

  .site-branding img {
      transform: scale(1.3);
  }

• 

  mchild · Member · Jul 30, 2014 at 8:55 am

  • Copy link

  Thanks, I’ve done that.
  I don’t understand why there seems to be an extra curly bracket in your first css example (for moving the title) – can you explain that, please?

• 

  mchild · Member · Jul 30, 2014 at 9:05 am

  • Copy link

  This is weird.
  I add the css to custom css, it says it’s published, it looks ok, then I go to view the site and the changes have disappeared. The extra lines of css are gone.
  Is there a limit to the number of lines of custom css or something?

• 

  mchild · Member · Jul 30, 2014 at 9:08 am

  • Copy link

  Also I went to the css stylesheet editor, when I save all except the first line disappears. Is it because of the extra opening curly bracket?

• 

  mchild · Member · Jul 30, 2014 at 9:10 am

  • Copy link

  It doesn’t like that bit of code. When I save it, everything inside the .sitetitle disappears.

• 

  thesacredpath · Member · Jul 30, 2014 at 8:49 pm

  • Copy link

  Hi,

  I don’t understand why there seems to be an extra curly bracket in your first css example (for moving the title) – can you explain that, please?

  That is because the first code is a Media Query. If you notice the first line in that code it says
  @media screen and (min-width: 601px) {
  That is telling the browser to only apply the CSS within that media query for browsers/devices that are 601px or wider. The CSS rules are included within the media query and it has brackets to let the browser know that everything between the media query brackets are the rules it should apply. Each rule within the media query also has to have an opening and closing bracket, which are to let the browser know, these are the styling declarations for this particular rule.

  You can read more on Media Queries here: http://en.support.wordpress.com/custom-design/custom-css-media-queries/

• 

  mchild · Member · Jul 31, 2014 at 3:52 am

  • Copy link

  So in the code above there should be another closing curly bracket?

• 

  eurello · Staff · Jul 31, 2014 at 6:46 pm

  • Copy link

  Correct, it looks like Richard just forgot that. Here’s the whole snippet:

  @media screen and (min-width: 601px) {
      .site-title {
         width: auto;
         position: relative;
         left: 120px;
         top: -85px;
  }
  }

  Nice catch! ;)