Solved

img resize wordpress

Posted on 2014-02-23
8
332 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 4
8 Comments
 
LVL 29

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 29

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
Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

 
LVL 29

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 29

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

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

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

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…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

751 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