Solved

img resize wordpress

Posted on 2014-02-23
8
326 Views
Last Modified: 2014-02-24
Hi,

In wordpress I add a header image. Then I want the image to resize on different devices but it  doesnt . In the syle.css it says this so why doesnt the header image resize?

#headimg img {
	-webkit-box-shadow: 0 0 10px 0 rgba( 230, 0, 0, .2 ); /* #000 */
	box-shadow: 0 0 10px 0 rgba( 0, 0, 0, .2 );
	display: block;
	margin: 0 auto;
	width: 100%;
}

Open in new window

0
Comment
Question by:jagguy
  • 4
  • 4
8 Comments
 
LVL 28

Expert Comment

by:chilternPC
ID: 39880466
try adding:

height: auto;


also try it out in different Browsers (Ie9, Chrome, Safari)  to make sure its ok
0
 
LVL 28

Expert Comment

by:chilternPC
ID: 39880495
of course this won't work if its a background image :-)

If it is a background image - You need to use

background-image:url('../yourheaderimage.png');
background-repeat:no-repeat;
background-size:contain;
background-position:center;
0
 

Author Comment

by:jagguy
ID: 39880540
The image was placed in the  Appearance> header and I uploaded an image. This is not a background image?
 Also I can resize an image easily enough in a non wordpress website with
width:100%

the height: auto; does nothing.
I have the latest FF and IE.

This must be a common issue but I cant solve it
0
 
LVL 28

Expert Comment

by:chilternPC
ID: 39880765
I usually use Chrome or Firefox and inspect the element to see what CSS is active, you may have another img definition overwriting it.
(open the site with Chrone and right click on the image and select 'inspect element' you will be able to see what CSS is in effect and what has been superseded.

what's the URL or the site ?
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

Author Comment

by:jagguy
ID: 39881211
Wait, I am just using twenty fourteen on my local pc. If you go to appearance> headings and upload a picture then what do I do so that the images resizes?

The css tag #headimg   when i change width to 10% the image will be 10% as an example, so this is the right tag

I think people have over thought what I am saying as I just used the defaults but the css tag I have found.  I havent used wordpress  much.
0
 

Author Comment

by:jagguy
ID: 39882174
ok I am stuck, nothing is resizing the header image
0
 
LVL 28

Accepted Solution

by:
chilternPC earned 500 total points
ID: 39882340
OK, I see , I thought you added that bit of CSS.

I installed a clean wordpress and activated the  theme twenty fourteen on my test site
 then
I went to Appearance->Header
uploaded an image which was way bigger than was needed , but it let me crop it online.
now its resizes when I view it on different devices. (('ve tried it on iPhone and Tablet and PC)
see my test at www.craftstall.com - it resizes simply by changing the size of the browser window

maybe you should try a different size image?  if you re-upload the same image sometimes it doesn't upload.  the theme suggests Images should be at least 1260 pixels wide. Suggested width is 1260 pixels. Suggested height is 240 pixels.

or double check the install and make sure all the files and styles are uploaded.
0
 

Author Comment

by:jagguy
ID: 39884758
ok I reinstalled the theme and itworks now.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

In order to have all security and back ups taken care of, WordPress users can sign up for services with WP Engine.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
The purpose of this video is to demonstrate how to integrate Mailchimp with WordPress, by placing a Mailchimp signup form on a WordPress Page or Post. This will be demonstrated using a Windows 8 PC. Mailchimp will be used. Log into your Mailchi…
The purpose of this video is to demonstrate how to set up the permalinks on a WordPress Website. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Go t…

867 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now