How to edit the mobile site?

[vquestmediaParticipant]

The home page images on the Parallax Pro show beautifully on desktop but are terrible on mobile. How do I edit this so that they show well on all devices? We are a photography company so images are a big deal!

http://www.visionquestvirtualtours.com

[AnitaKeymaster]

Parallax and similarly created themes that use backstretch images have never looked well on mobile devices in my opinion. They do not reduce down to display the whole picture but rather uses the center point of the image as the mobile focal point. You could customize your theme to be more mobile-friendly by added a background-size: contain but you'd also need to make some adjustments to the widget area and adjust the font sizes.

---

Training & Request a Customization | Recommended Genesis Developer | My WordPress & Genesis Tutorials

[[email protected]Participant]

Following on from what Anna said, to edit the site to make it suitable for mobile you can use "Additional css" page (rather than modifying the actual theme) to over-ride the theme's css. To help get you started here is an example of a couple of over-rides that I have recently made to put a shadow behind the title and a widget that overlays the picture (without affecting the other widgets) and to over-ride the "backstretch" setting for the image.

#custom_html-2 .widgettitle.widget-title{
    color: #fff;
    background-color: rgba(0, 0, 0, 0.1);
}

#custom_html-2 .custom-html-widget{
    color: #fff;
    background-color: rgba(0, 0, 0, 0.1);
}

  .home-odd {	background-size: contain}

Once you have implemented this you may notice that the images no longer cover the whole widget area vertically - if anyone has any code to deal with this, feel free to share it otherwise we will need to modify our images to display better. As Anne mentioned, we will also need to look at the font sizes.

[Author]

Posts