Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

img resize wordpress

Posted on 2014-02-23
8
Medium Priority
?
337 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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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 2000 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

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

Question has a verified solution.

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

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
This article discusses four methods for overlaying images in a container on a web page
The purpose of this video is to demonstrate how to prevent comment spam on a WordPress Website. This will be demonstrated using a Windows 8 PC. Plugin Akismet will be used. Go to your WordPress login page. This will look like the following: myw…
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 …

721 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