having a image resizing issues in WP

by 6 replies
7
I am having an issue with a few images in my site not resizing in smaller browser windows as well as smaller monitors. My main concern is my header image that is getting hidden on the right side.

I have been playing around with some css settings but so far have been stumped. Other than creating smaller images to make up for it I'd like to get my fluid theme to be truly fluid.

If you could offer some assistance i would be very grateful. This is my last hurdle before I turn my client loose with his new site.

Thanks in advance and email or PM me for the URL.

Travis
#website design #header #image #issue #issues #resizing
  • Take a look at this example url of a "fluid image" & check the source code to see how it is done:
    Resizin’ My Images, Boss.

    The detailed instructions for implemetning the code as for the above example can be found here (make sure you read it all - it is a long article, and the important part to do with the correct script for fluid images is near the end):

    Fluid Images — Unstoppable Robot Ninja

    The basics of it are that you add the following to your css:

    And you add the script as described at Fluid Images — Unstoppable Robot Ninja and as viewed in the source code at Resizin’ My Images, Boss.
    • [ 1 ] Thanks
    • [1] reply
    • @leonkouts

      So this will take care of my header background image too. I am about to go check out your recommendation right now and let you know how I make out.

      T
  • It should take care of any images including your header image - let us know how you go...

    I'm sending you a PM for your url if you need any help with it.
  • Thanks for the url Travis.

    Looking at your source code, just edit your header.php above the </head><body id="home"> tags with the following:

    1. The full script as shown at the end of the article at: Fluid Images — Unstoppable Robot Ninja

    2. The css fix for IE browsers as shown here:

    <!--[if IE]><style type="text/css">
    img,
    p {
    width: 100%;
    }
    </style><![endif]-->

    Then edit your theme's style.css to add this:

    img {
    max-width: 100%;
    }
    • [ 1 ] Thanks
    • [1] reply
    • I tested this on my localhost and I am not sure why but my video overlay images and my header image do not resize with the browser. Everything else seems to be resizing just fine.

      Any suggestions?
  • Banned
    [DELETED]
    • [1] reply
    • @ocsSEO01

      that did not work for me

      so if you can take a look at the site I am working on maybe you can see something i need to change.

      thebalanceyouneed[dot]com

      The script suggested by leonkouts works on just about everything but the header image and the video overlay images.

      the video images are in the same folder as the videos according to the instructions for the jw player.

      Not sure if that is causing a problem with those images.

      I have only added the script and css to my localhost so far but you will get to see what my problem is on my live site the way it is now.
Join the discussion

Next Topics on Trending Feed

  • 7

    having a image resizing issues in WP

    I am having an issue with a few images in my site not resizing in smaller browser windows as well as smaller monitors. My main concern is my header image that is getting hidden on the right side. I have been playing around with some css settings but so far have been stumped. Other than creating smaller images to make up for it I'd like to get my fluid theme to be truly fluid.