Executive mobile logo

Community Forums Forums General Discussion Executive mobile logo

This topic is: not resolved

This topic contains 1 reply, has 2 voices, and was last updated by  sangfroidweb 1 year, 1 month ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #44202

    jonhebert
    Participant
    Post count: 1

    Hi, my logo is too wide for the iPhone, and I don’t know how to adjust it. I want it to stay the size it is on iPad and desktop. About 25% of the logo gets cut off on the iPhone. I have a custom logo image, set to 1140 x 100 pixels per the theme instructions. Thanks

    http://50.116.75.92/~elainech/ech
    #44238

    sangfroidweb
    Participant
    Post count: 38

    Hi!

    You can try adding this at the bottom of the Mobile Responsive section of the stylesheet. Because the header image width is 1100 pixels wide, we have to set the background-size larger than 100% at this very small screen width, which is counter-intuitive, but works in Firebug.

    It’s super important that this rule is set ONLY on screens smaller than 385pixels (or so) wide. Because there is not yet a section for this in the mobile responsive part of the stylesheet, we need to add it at the bottom.

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

    #header {
    background-size:300%;
    }

    }

    I also noticed that the footer is too wide at the smallest screen size. This is an easy fix — just change the padding and width of the footer area to percentages adding up to no more than 100%. I notice this starting at screen width 1023. So, add the following in that section of the stylesheet (between 2092 and 2252)

    #footer {
    padding: 20px 4%;
    width:92%;
    }

    Hope this helps!
    Liz


    Liz or Eddy @SangFroid Web — Customizing StudioPress themes at http://www.wpstudioworks.com and building custom Genesis Child themes for businesses at http://www.sangfroidwebdesign.com :)

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.