Solved

img resize wordpress

Posted on 2014-02-23
8
329 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
Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
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
 

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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Build an array called $myWeek which will hold the array elements Today, Yesterday and then builds up the rest of the week by the name of the day going back 1 week.   (CODE) (CODE) Then you just need to pass your date to the function. If i…
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
The purpose of this video is to demonstrate how to set up an RSS Feed on a WordPress Website. This will be demonstrated using a Windows 8 PC. Feedburner will be used for this demonstration. Go to your WordPress login page. This will look like the…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

828 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