having a image resizing issues in WP

by mezloh

Posted: 14 years ago 6 replies

WEB DESIGN

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

#header #image #issue #issues #resizing

ImmediateAction 14 years ago

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:

For all browsers except IE:

img {
max-width: 100%;
}

For IE:


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
Signature
DIME SALE!!
This Magic But Simple To Make A-------- ----- -------- ----
Will Get You Immediate Attention And Have Prospects
Begging You To Make One For Them Too!!!
{{ DiscussionBoard.errors[2348183].message }}
- mezloh 14 years ago
  
  @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
  
  Thanks
  
  Signature
  
  GET PAID TO DRINK ENERGY DRINKS!
  
  Don't Miss Out on the FuXion Opportunity!
  
  {{ DiscussionBoard.errors[2348216].message }}
ImmediateAction 14 years ago

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
Signature
DIME SALE!!
This Magic But Simple To Make A-------- ----- -------- ----
Will Get You Immediate Attention And Have Prospects
Begging You To Make One For Them Too!!!
{{ DiscussionBoard.errors[2348231].message }}
ImmediateAction 14 years ago

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:



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

img {
max-width: 100%;
}
- [ 1 ] Thanks
- 1 reply
Signature
DIME SALE!!
This Magic But Simple To Make A-------- ----- -------- ----
Will Get You Immediate Attention And Have Prospects
Begging You To Make One For Them Too!!!
{{ DiscussionBoard.errors[2348309].message }}
- mezloh 14 years ago
  
  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?
  
  Thanks
  
  Signature
  
  GET PAID TO DRINK ENERGY DRINKS!
  
  Don't Miss Out on the FuXion Opportunity!
  
  {{ DiscussionBoard.errors[2348612].message }}
ocsSEO01 Banned 14 years ago

[DELETED]

{{ DiscussionBoard.errors[2348639].message }}
- mezloh 14 years ago
  
  @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.
  
  Thanks
  
  Signature
  
  GET PAID TO DRINK ENERGY DRINKS!
  
  Don't Miss Out on the FuXion Opportunity!
  
  {{ DiscussionBoard.errors[2348715].message }}

having a image resizing issues in WP

Trending Topics

Newbie

How did you turn it all around?

A healthy fascination for Hollywood...

Any thoughts on golf's latest phenom...Scottie Scheffler??

best high quality crypto traffic.