Outreach template: issues with the header image

Community Forums Forums Design Tips and Tricks Outreach template: issues with the header image

This topic is: resolved

This topic contains 25 replies, has 5 voices, and was last updated by  JingDoc 1 year, 2 months ago.

Viewing 11 posts - 16 through 26 (of 26 total)
  • Author
    Posts
  • #34212

    mpoyner
    Participant
    Post count: 21

    Wow, thanks so much! This is perfect.

    I see a couple of places where I’d like a bit more negative/white space around the logo (just a few pixels). I assume the best way is to just build it into the PNG itself, rather than trying to play with margin CSS around the image?

    I can’t thank you enough for this help.

    Have a great evening!

    #34213

    susanlangenes
    Participant
    Post count: 28

    Hey looks great!

    If you’d like the logo to be centered for smaller screens, the same way the header widget is, then add this:

    @media only screen and (max-width: 960px) {
    #title-area { float:none; margin: 0 auto; }
    }

    #34214

    susanlangenes
    Participant
    Post count: 28

    I can’t figure out why our posts are in opposite order… oh well.

    I’d actually recommend playing with the CSS rather than adding negative space to the image.

    Put these lines in and you can have fun with adjustments:

    .header-image #title-area {
    height: 120px;
    width: 400px;
    }
    You might also add media queries and play with those.
    Cheers!

    #34217

    mpoyner
    Participant
    Post count: 21

    Actually, yeah, I was just going to ask about something with the media queries. How do I get the image to shrink as the viewport is getting smaller? Create a number of images and pull them in with media queries? Or is there a way to make the one image dynamically shrink? Whatever is the best practice is the way I’ll do it.

    #34228

    susanlangenes
    Participant
    Post count: 28

    I think in your case a bit of a combination of the two will work best. The image will shrink if its width is specified as a percentage, but I’m thinking that doesn’t really need to happen until the screen is around 500px wide.

    What do you think? Can you specify how you’d like it at various screen sizes?

    #34283

    mpoyner
    Participant
    Post count: 21

    Hey Susan, I didn’t get a nofication about this last reply you sent. Sorry!

    This morning, I had an email from StudioPress support, replying to a message I had sent to them yesterday before you got in touch with me. They showed me where to put the code for my image. I really only needed it to resize once it got to the smaller viewport sizes, as you said. You can see that it’s working great now.

    Thanks for all of your help! I really appreciate it. You went above and beyond.

    #34287

    susanlangenes
    Participant
    Post count: 28

    You are most welcome :)

    #36139

    mpoyner
    Participant
    Post count: 21

    Hey Susan, in case you’re still in the helpful mood :-)

    Could you take a look at my post linked below and give me some advice, when get some spare time? Thanks!

    http://www.studiopress.com/forums/topic/need-to-make-the-slider-smaller-and-put-some-news-text-next-to-it-responsively/

    #37179

    yellowdog
    Participant
    Post count: 36

    Can i bump this thread?

     

    I have used the header at the size it recommends and when i go to look at the site at http://www.studiopress.com/responsive/ it looks, well not great!

    I added the responsive header plugin but i still have big spacing between the menu etc and even on teh ipad it has some extra spacing.

     

    If anybody has any advice I would be very grateful

     

    Url is http://www.mdfa.co.uk/

     

     

    #40341

    John
    Participant
    Post count: 157
    #59383

    JingDoc
    Participant
    Post count: 8

    Susan, you are the most helpful helper I’ve seen on here. All these tips helped me so much after hours of working on this– thank you for taking the time.

Viewing 11 posts - 16 through 26 (of 26 total)

The topic ‘Outreach template: issues with the header image’ is closed to new replies.