Need help? Check out our Support site, then


How can I fix my header issues (browser resizing) in "Hemingway Rewritten"?

  1. I sized my custom header images according to the theme's recommended pixel height and width. When I increase the size of my browser window, however, the image gets cut off and the quality becomes less clear.

    The blog I am writing about is http://erikakaophotography.com/

    Many thanks in advance.

    The blog I need help with is erikakaophotography.com.

  2. I don't know what I'm supposed to write here.

  3. jeremeylduvall
    Staff

    Hi Erika!

    So, it looks like your uploaded image is 1280x416. When the screen is sized so that the header image fits that dimension, the image appears clear and in focus. However, I believe the issue you're referring to is when the image is blown up to fill a larger screen. At that point, the image becomes fuzzy. Is that correct?

    If so, is the image you're uploading being scaled down to fit the dimensions of the header area or scaled up? Can you try upload a larger header image and have it cropped upon uploading rather than uploading an image with the suggested dimensions?

  4. Hi, Jeremy.

    That's exactly correct, and I'm not sure why that's occurring because I created each of my header images at the exact pixel dimensions specified for the theme.

    It doesn't bother me so terribly that I want to resize all of my headers. I just wondered if I was doing something wrong.

    I'll explore it one of these days. Thanks so much!

  5. jeremeylduvall
    Staff

    Hi Erika,

    Nope! You aren't doing anything wrong as far as I can tell. I'm using a 27-inch monitor and even the theme demo header image looks a bit stretched out:

    http://hemingwayrewrittendemo.wordpress.com/

    Uploading a larger-than-necessary image and having it cropped by the theme doesn't appear like it would work. The theme automatically crops the image down to the smaller size. I'll investigate more and let you know what I find out!

  6. jeremeylduvall
    Staff

    Hey Erika,

    On second thought, I think uploading a larger-than-necessary image will work. Can you try uploading an image that's 2560 x 832 (twice the recommended size)?

  7. Hi, Jeremy.

    Thanks for exploring this.

    I recreated the header for my About Me page at 2560 x 832. Can you see what you think of it quality-wise compared to the other pages? The logo is smaller but I'm not sure if that that will make a difference.

    http://erikakaophotography.com/aboutme/

    Many thanks again.

  8. Since responding, I made the logo larger so that it's more comparable.

    I think I'm happier now but I do appreciate your input.

    Again, thanks for looking.

  9. Comparing it to the other headers, I don't know if the difference is really that significant enough to warrant my redoing all of my other headers. Clipping seems to happen with both when I make them smaller and blurring seems to happen with both when I make them larger.

    Is it worth the work?

  10. jeremeylduvall
    Staff

    Hey Erika,

    It does seem to blur a little bit even on this header image here:

    http://erikakaophotography.com/aboutme/

    However, I do think that the header image on the About Me page looks clearer than the one here:

    http://erikakaophotography.com/

    Although the theme crops the image to fit the suggested dimensions, it looks like it still references the original source image as shown here:

    https://cloudup.com/cxN8h9m0_oC

    That image can be seen here and is 1400 x 455:

    http://erikakaophoto.files.wordpress.com/2013/08/ekp-header-template-about-me-new1.jpg?w=1280&h=416&crop=1

    The larger src image size is likely why the image looks better on the page. The front page photo on the other hand is 1280 x 426 max:

    http://erikakaophoto.files.wordpress.com/2013/08/ekp-header-template-welcome1.jpg?w=1280&h=416&crop=1

    It looks like the only solution would be to import the files at a much larger image and let the theme automatically crop them down. That way, it has the larger image file to reference in case the screen size expands. I'm not sure if you want to go to the trouble of fixing all of your header images you've already imported (it looks like you have quite a few), but it might be good to upload a larger image moving forward.

  11. Thanks, Jeremy.

    I vaguely followed you throughout that. But the take-home message seems to be to resize my header files for the best visuals, possibly leaving a little wiggle room at the top and bottom to account for clipping.

    It is a little annoying, though, but I guess it is what it is.

    Thanks again very much. I appreciate all of your time. :)

  12. jeremeylduvall
    Staff

    Not a problem! I apologize for the extra workaround. Please let me know if you run into any additional trouble while setting up the theme!

  13. Thanks, Jeremy.

    I managed to get all of my headers resized this morning. I appreciate your help and I look forward to enjoying the theme. :)

    While I have your ear, can you help me with something else? I will ask it here but if you want me to begin a new query, I'd be happy to.

    I want to set up a landing page that is formatted differently from my main pages. See here: http://erikakaophotography.com/747-2/ However, I want the images aligned four to row and I can't seem to make that work.

    Many thanks!

    http://erikakaophotography.com/747-2/

  14. jeremeylduvall
    Staff

    Hi Erika!

    Here's what I'm currently seeing on my side:

    https://cloudup.com/cpMVu1n_hSe

    The images look to be aligned four across. Is that what you're looking for?

  15. Hi, Jeremy.

    That is exactly what I was going for, and I did it all by myself! I'm so happy.

    But, two questions. How do I center the words under the images? And it looks very wonky on my iPhone. On that device, all of the pictures are a different size it seems. Any thoughts?

  16. jeremeylduvall
    Staff

    Hey Erika,

    To center the text, navigate to the edit screen. You should be able to highlight just the text under the image and use the align-center option in the toolbar. Can you give that a try for me?

    Regarding the image sizing, I believe this is a result of the images starting out as different sizes. For example, the image above "People" is 178 x 178. Some of the others are 200 x 200. To correct this, it would be best to crop the images to 200x200 before uploading so they are uploaded at the exact same size.

    I realize this is another bit of a pain, and I apologize! The good news is that you only have to resize and reupload the images above Welcome, People, About Me, and Blog. The others are 200 x 200 already.

  17. Hi, Jeremy.

    Thanks again. I'm really grateful for all of your counsel here. I can resize and reinstall those images easily enough.

    Have a great weekend, and hopefully you won't hear from me again. :)

  18. Sigh.

    OK, so I cropped each of the original images to a square and sized each down to 1000 px x 1000 px and each ended up being 1.64 in x 1.64 in and 240 px/cm. From Photoshop, each image was identically sized.

    I replaced them on my website and from a laptop, the page looks fantastic and each image is identically sized. But unfortunately, it still is wonky on my iPhone. Here, the first images in each row (Welcome, About Me) is one size, the second images (People, Blog) are another, the third (Nonprofits, Investment) are larger than the first two, and the fourth (Small Businesses, Say Hi) are another size entirely.

    I'm not sure what I'm doing wrong. This time, I even removed the original images and gave the 1000 px x 1000 px images original names so that there would be no confusion within WordPress.

    Sigh. Any advice would be greatly appreciated.

    One thing just occurred to me while viewing it on the iPhone. Would the wonky image sizing have anything to do with the amount of copy appearing beneath each image? The image sizes strangely seem to coincide with how much copy is beneath them.

  19. I may try to incorporate text into each image through Photoshop and remove the tags beneath. Let's see how that works.

  20. Bingo. :)

  21. jeremeylduvall
    Staff

    Perfect! That looks great. Are you happy with how it looks? I tested it out on my iPhone as well and it looks great there too.

  22. Thanks, Jeremy.

    I'm generally pretty thrilled wih how everything looks now.

    But if I could change one thing, it would be my custom header on the home page. I think the huge headers work on other pages since those pages are copy heavy. But not the front page.

    Is there not any way to resize that area? If not, do you have any suggestions on how to make the focus more in the square images and less on my logo?

  23. jeremeylduvall
    Staff

    Hey Erika,

    So, if I understand correctly, you're looking to have the header logo be a bit smaller rather than stretching out across the page. Is that correct? If so, the only plan of attack I'm aware of would be to manually create a header image with a white background and place your logo in the middle. You'll want to make the header image larger in size so that it doesn't have to expand to fill the screen. That way, you can control how large the logo is in the middle. Does that make sense? For example, you could create a custom header that is 2560 x 832 with the logo in the middle. That way, you control how the logo image looks rather than letting the theme auto-expand it.

  24. Hi, Jeremy.

    Thanks for the suggestion. I gave that a go and the logo was smaller but the white space was still just as large.

    So I spent yesterday exploring another them and I found Illustratr to be a good one. I'd love your thoughts:

    http://erikakaophotography.com/

    After all that! Well, hopefully our thread will help others with the Hemingway Rewritten theme.

  25. Oy!

    Now I see a "NOTHING FOUND" at the bottom of every page.

    Any clue?

    http://erikakaophotography.com/

    Thank you.

  26. This, too, I figured out. Sorry to keep asking and then solving my own problems. :)

  27. jeremeylduvall
    Staff

    Hey Erika!

    Wow! I really like the look of the Illustrar theme on your site. I think it does a really great job of displaying your content. One note, the URL for your "People" page has a "2" in it:

    http://erikakaophotography.com/people-2/

    If you want, you can change that from the Edit Page screen here:

    https://erikakaophoto.wordpress.com/wp-admin/post.php?post=80&action=edit

    Just click "Edit" at the top of the page underneath the page title. Remove the "2" and click "Ok". The URL should be updated when you update the page.

    That's my only suggestion! Otherwise, it looks wonderful.

  28. Hey, Jeremy.

    Thanks for the nice words! I'm pretty thrilled with it as well and I've gotten great feedback so far.

    Thanks for the tip on "-2." I've fixed it.

    One more question, since you've been so helpful. ;) When I look at the site from my iPhone, the third box from each row on the home page is not aligned with the rest.

    I've tried to remove the paragraph formatting but it makes it even worse.

    Any suggestions?

    Thanks in advance.

  29. jeremeylduvall
    Staff

    Hey Erika,

    To be honest, I'm not exactly sure why the third image is always getting pushed over. One solution would be to build a table. If you did that, your images would look like this on mobile devices:

    https://cloudup.com/cfagYTQuKFJ

    What are your thoughts on that layout?

    Alternatively, you may want to ask in the CSS forum here:

    http://en.forums.wordpress.com/forum/css-customization

    We have some CSS wizards that patrol that forum. They may be able to give you a better solution!

  30. Hi, Jeremy.

    The layout you proposed is exactly how I'd like it to look "mobilly."

    I'll take a stab at it and share the results soon.

    Thanks.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.