• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

How to edit the mobile site?

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Retired StudioPress Themes › How to edit the mobile site?

This topic is: not resolved

Tagged: mobile site

  • This topic has 2 replies, 3 voices, and was last updated 2 years, 1 month ago by [email protected].
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • March 24, 2021 at 11:19 am #503561
    vquestmedia
    Participant

    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
    March 26, 2021 at 7:09 pm #503581
    Anita
    Keymaster

    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.


    Love coffee, chocolate and my Bella!

    April 29, 2021 at 5:04 pm #503894
    [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
Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.
Log In

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble