Header image resizes while loading

  • Author
  • #1037398


    Hi there,

    I have an image on my header and while the page is loading it awkwardly resizes. I’m thinking it has something to do with it it trying to resize to match the font. I’m having the same problem with Chrome, Firefox and IE.

    Any ideas?

    I’d also like to move the site title “zero waste advocate…” over towards the left and have been playing with padding and margins in the below code with no success to push it over to the left.

    .site-description {
    margin:0 4.47761% 0 3.17761%;
    padding:1.5em 0 0;

    Thanks for any help!

    The blog I need help with is urbanbandit.wordpress.com.


    Can you test to see if the custom CSS you added is causing the awkward resizing issue? To do that, take away all of the CSS, save changes, and then view the blog to see if the same problem happens or not. To add the CSS back after testing, you can restore a past revision by clicking on one in the list on your Appearance → Custom Design → CSS page and then clicking the Restore button.

    If you find that the problem went away without your custom CSS, then add it back one block at a time until the problem reappears. Then you’ll know which ruleset is causing the trouble and you can modify that one.


    I’d also like to move the site title “zero waste advocate…” over towards the left

    The site title and description are in separate block level elements next to each other in the header. So one way to move the site description to the left would be to make the title width smaller. Try this:

    .site-title {
    	width: 30%;


    Thank you so much again for help!

    I took away all the custom CSS and still the image resizes while loading. I’m thinking it might have something to do with the fact that I made the title text smaller than it is standard on the site (using the specific font tool). Perhaps there’s an “em” relation that is causing the resize?

    I’m a beginner at CSS so hope that makes sense. Thanks for the tip on moving the site title – that worked which is awesome!


    I did see the header resizing issue when I first checked your blog, but I tested it again just now and I can’t see it happening any more. Try clearing your browser cache (to make sure you’re looking at the latest version of the page) and reloading. Can you still see it then?



    Thanks Designsimply – it must have just been a glitch. It seems to have cleared now with some other transformations to the text that I put in. Thanks again for all your help!


    Wooo! Glad to hear it’s working now. Cheers :)

The topic ‘Header image resizes while loading’ is closed to new replies.