WordPress.org

1. Lane Lester
   Member
   Posted 11 months ago #
   

   Every website needs to look good, no matter what kind of device is used to view it. Twenty Eleven does a good job of responding to different screen sizes.

   At a site I'm developing I want to use a logo instead of the blog title and motto in the header. Following some of another thread I was able to get it to look good on my desktop screen by editing the header.php and adding this stanza to style.css:

   hgroup {
   height:140px;
   width:590px;
   }

   It also looks good on my 10" tablet in landscape mode, but it portrait it's a disaster, which you can see at this link.

   Do you know a solution to this?

   Lane

2. Digital Raindrops
   Member
   Posted 11 months ago #
   

   You have the image in the id #site-title so to make it fluid use max-width rather than fixed widths, heights should be aute, as the image resizes so will the height proportionally:
   

   #site-title {
      height: auto;
      max-width: 278px;
   }

   For a fluid solution:
   

   hgroup {
    max-height: 140px;
    max-width: 590px;
   }

   HTH

   David

3. Lane Lester
   Member
   Posted 11 months ago #
   

   Thanks, David. That changed things for the better, but I'm not there yet.

   The change produced more padding under the logo in the desktop view, and I'd like to eliminate that somehow.

   In the tablet portrait view, things are better, but part of the logo is under the header graphic (screenshot).

   Lane

4. Lane Lester
   Member
   Posted 11 months ago #
   

   Oops, I hadn't seen you added "max-" to the hgroup stanza. When I fixed that, the extraneous space above the logo went away on the desktop view.

   For some reason, the tablet portrait view remained the same. I think it's related to the shift of the Search object to above the logo, rather than beside it.

   If no other fix presents itself, I'll try getting rid of Search, since it's not needed for this site.

   Later: Nope, taking the Search out didn't change anything.

   Lane

5. Lane Lester
   Member
   Posted 11 months ago #
   

   A small improvement: I got the logo to display completely by changing to this stanza in style.css:

   hgroup {
   max-height:200px;
   max-width:590px;
   }

   But as you can see in this screenshot I still have the undesired extra blank space at the top. I'm going to look around in style.css to see if I can find what's sticking that in there when the screen width is small (5" in the case of my tablet in portrait position).

   Suggestions have already helped a lot, and more are welcome!

   Lane

Reply

You must log in to post.