Wellness Pro – how to get photos in Front Page Widget 1 & 3 to resize

[DawnT]

The background images on the homepage of Wellness Pro don't resize to be mobile responsive.

StudioPress support told me it's by design that on smaller screens, images are not proportionally reduced and the central part is shown in focus. This is to make sure the content in these sections have a background image to cover the back, as their height gets longer on small screens. If images are reduced proportionally, image height would also be reduced and it will not be able to cover the entire content in each section.

However, when I view the site I'm working on, on a smaller screen the images in Front Page Widget 1 and Front Page Widget 3 are a blurred mess and look awful. The central part of the image is not shown in focus.

Support suggested I post my issue on the forum for assistance on using custom CSS code to make the images adjust on smaller screens. How would I make that change to see if it looks any better?

Thanks!

http://www.paigereesesalon1.com/

[Chris35]

For biginin you must reduce your images, optimize them : 5000 pixels width for one i just saw, sure it wont be responsive !
Use free plugin solution as EWWW or using any images program on your desktop. Just to help you, a BIG screen as 24 inches on full page is at 1980 pixels width...
If you have photoshop, export your images usin "export for the web" solution.

---

Création de site internet à Rennes

[carasmo]

This was answered here: https://www.facebook.com/groups/genesiswp/permalink/1253979881319873/?match=d2VsbG5lc3M%3D

Join the Genesis Facebook group: https://www.facebook.com/groups/genesiswp/

---

Genesis Theme Customization and Help

[Elza van Swieten]

could someone post the answer from the group here?
I'm facing the same problem

[carasmo]

It takes moments to join the Facebook group, it takes a long time to copy a long thread. Please join https://www.facebook.com/groups/genesiswp/. Then you can try to adapt that answer to your situation (it's involved) and after making the attempt and you need additional help, you're likely to get an answer if you start that thread up again or start a new thread with your site link. Most CSS answers are specific to individual situations.

---

Genesis Theme Customization and Help

[Elza van Swieten]

I asked to join the group hours ago, and I saw the group. When I checked later the group was 'gone'. Probably someone accidentally pressed block instead of approve my request to join. https://postimg.org/image/p2ohk14bh/

Anyway, in the meanwhile I got an answer from the helpdesk here:

We have shared this with our development team and should have a fix in a future theme update. In the meantime can you can try adding all of the following code to the bottom your Wellness Pro theme's "style.css" file:
-----------------------------------

@media only screen and (max-width: 1140px) {
.home .image-section {
background-attachment: scroll !important;
}
}

Once the above code is added, please clear your browser's cache and check the background images again.-
---------------------------------------

[carasmo]

Well, that is bizarre. I'll post that over there to see what happened to your join request. The answer on the FB thread involved loading up another image for a smaller viewport in order to get it to work as the OP wanted.

---

Genesis Theme Customization and Help

[carasmo]

You've been unblocked. They are baffled why you were blocked.

---

Genesis Theme Customization and Help

[Elza van Swieten]

thanks Carasmo!

[Author]

Posts