Solved

img resize wordpress

Posted on 2014-02-23
8
325 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 

Author Comment

by:jagguy
Comment Utility
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
Comment Utility
ok I am stuck, nothing is resizing the header image
0
 
LVL 28

Accepted Solution

by:
chilternPC earned 500 total points
Comment Utility
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
Comment Utility
ok I reinstalled the theme and itworks now.
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
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 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…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

744 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

19 Experts available now in Live!

Get 1:1 Help Now