Postioning Header image elements

  • Unknown's avatar
    darrylcotton · Member ·

    Hi

    Is there any way to ensure the logo is a decent legible size and always left aligned relative to the left margin of the page, and the web and email address info on the right of the header aligns with the right hand margin, on all devices.

    Also, It all gets blurred depending on the size of the viewing window, is there any way to overcome this?

    Thanks
    Regards

    Darryl

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

  • Unknown's avatar
    thesacredpath · Member ·

    Hmmm, given the large amount of whitespace on each side of the important parts in that image, I don’t see a way to do that with the current image, but let’s try something. Create an image without the top and bottom colored border and with only the logo and text on the right, cropped tight on the left and right of it, and then insert that as your header image. It is going to come in pretty huge, but we can adjust that with custom CSS. Let me know when you have that done and I’ll work on the CSS for you.

  • Unknown's avatar
    darrylcotton · Member ·

    hi
    i have created the new image. thanks :)

  • Unknown's avatar
    thesacredpath · Member ·

    Thanks for letting me know. See what you think with this added to your custom CSS. The last two CSS rules are to fix a couple of anomalies I saw when looking at your site. 

    .site-header-image {
  background-size: contain;
  padding-bottom: 75px !important;
  margin-left: 20px;
  margin-right: 20px;
}
.site-header {
  background-color: #fff;
}
.site-content {
  max-width: 950px;
  width: 100%;
}
.entry-content img[class*="wp-image"] {
	width: 100%;
}
  • Unknown's avatar
    darrylcotton · Member ·

    Great, that works perfectly and looks great on a phone as well.

    The only problem is when I open the tab called TEAM, the layout has changed, so all the pics are now the full width. Some of them are not great quality so that is why, I kept them small. The same goes for the tab 2016 FESTIVAL-WRITERS (a-c etc)
    But I actually like the new layout so I’m just waiting to hear if I can get better quality pics. Im sure we can.

    Thanks again. I love the new look :)
    Darryl

  • Unknown's avatar
    thesacredpath · Member ·

    Ah, ok. We can do one of two things. Remove the last CSS rule having to do with the image width, or we can replace the last one with the following, which limits that change to only the home page. 

    .home .entry-content img[class*="wp-image"] {
	width: 100%;
}
  • Unknown's avatar
    darrylcotton · Member ·

    It seems all involved like it the way it looks now, as do I,…thanks again :)

  • Unknown's avatar
    thesacredpath · Member ·

    Hooray and you are welcome!

  • The topic ‘Postioning Header image elements’ is closed to new replies.