We help IT Professionals succeed at work.

Modify large image so it resizes for mobile devices

169 Views
Last Modified: 2017-06-21
How do I modify the css so that the large image (woman with arms outstretched) resizes to fit mobile devices?  I try to use firebug but am not able to click on image to view code.

Beta site
681.3b0.myftpupload.com

Tablet Screenshot
https://screencast.com/t/UK86sQAC6L7E

Phone Screenshot
https://screencast.com/t/q45pgs0M3T
Comment
Watch Question

Jitendra PatilJitendra Patil (patil786)
CERTIFIED EXPERT
Top Expert 2013
Commented:
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION

Author

Commented:
I am using wordpress.
Scott FellDeveloper
CERTIFIED EXPERT
Fellow
Most Valuable Expert 2013
Commented:
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION

Author

Commented:
THanks Scott.  How do I call out the other image using css?
Jitendra PatilJitendra Patil (patil786)
CERTIFIED EXPERT
Top Expert 2013
Commented:
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION

Author

Commented:
I am using Wordpress not Bootstrap.  What I am hoping to achieve is to have the full image displayed for all screen sizes.  I am ok with resaving the images for each size but am not sure what size to save the image too and I also am not sure how to modify the css.
Scott FellDeveloper
CERTIFIED EXPERT
Fellow
Most Valuable Expert 2013

Commented:
Wordpress is your cms and bootstrap is a responsive framework and can be used together. You may have it loaded and not know it.

Of course, it is very difficult to help by looking at images of a screen vs the actual url.  The images you are showing seem to be from the admin side and not the frront end and that is where we need to look.  Can you create a public url to view?

Author

Commented:
I did provide url in my original question.
681.3b0.myftpupload.com
CERTIFIED EXPERT
Commented:
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION
David FavorFractional CTO
CERTIFIED EXPERT
Distinguished Expert 2019
Commented:
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION

Author

Commented:
This is a Studio Press template.  The image DOES resize but it doesn't resize proportionately.  Meaning the image gets smaller but you don't see the lady's face.  You see her arm getting smaller.

I consulted with Studio Press. It was advised by Studio Press to use an image that doesn't have a main subject matter.  I have used other Studio Press templates and those images resized fine using people as the subject matter.  I figured this was "no big deal" to find the css to fix the problem.

David, thank you so much for all the info you provided.  Unfortunately, it is way way way over my head.
Commented:
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION

Author

Commented:
Was provided with the following code which helped.  It's not perfect but it is better. Thought I would share.

body.custom-background {
     background-position: 50% top; !important;
     background-size: cover; !important;
}

Open in new window

Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a sample view!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.