Problems with Upfront? Maybe?

I have created a simple coming soon page for a client. When visiting the site on my mobile devices, I don't see the background image, but only a white background. What is the problem here?

  • Dimitris

    Hey there Julius,

    hope you're having a beautiful day! :slight_smile:

    Could you please grant us support access to your website via WPMUDEV Dashboard plugin, as described here?
    https://premium.wpmudev.org/manuals/wpmu-dev-dashboard-enabling-staff-login/

    Also, please point to us the URL of this "coming soon page" to better inspect it.
    You can use the support note area to share that with us, after you grant us access.

    Just let us know here in your next reply when you're ready so we can dig in! :slight_smile:

    Warm regards,
    Dimitris

  • Dimitris

    Hey there Julius,

    I was able to inspect your website via my Android mobile and that gave me the following error message:

    http://www.xxxxxxxxx.com/upfront-dependencies/styles/f66cfe17ddc0cc0e516ec788de042198?ver=1.2
    Failed to load resource: the server responded with a status of 500 (Internal Server Error)

    Could you please try to edit wp-config.php file and insert next line just above the /* That's all, stop editing! Happy blogging. */ comment.
    define('UPFRONT_DEBUG_LEVELS', 'dependencies');

    Clear you caches and try with a fresh browser.
    If this continues, edit once more the wp-config.php file, find a line like
    define('WP_DEBUG', false);
    and replace it with the following (if the above line doesn’t exist, simply insert next snippet just above the /* That's all, stop editing! Happy blogging. */ comment)

    // Enable WP_DEBUG mode
    define('WP_DEBUG', true);
    // Enable Debug logging to the /wp-content/debug.log file
    define('WP_DEBUG_LOG', true);
    // Disable display of errors and warnings
    define('WP_DEBUG_DISPLAY', false);
    @ini_set('display_errors', 0);

    Then clear your caches and go ahead and try to replicate the error by accessing homepage via a fresh browser. By doing so, a /wp-content/debug.log file should be created. Simply download it, rename it to debug.txt and attach it here in your next reply.

    Warm regards,
    Dimitris

  • Adam Czajczyk

    Hello Julius!

    I checked the site and I'm a bit puzzled with a thing that I noticed. While in Upfront editor everything seems fine, if seems that on mobile device the site is loading styles that explicitly setup background to white for smaller sizes.

    I see that there's currently the "about" page set as a homepage so would you mind running a small experiment? Please first:

    - create (that's temporary thing) another page
    - set that other page to be the homepage
    - then visit the domain.com/about page
    - see if it has expected background on both desktop and mobile.

    If it does not, edit it with Upfront and check responsive modes if the background is properly set. Let me know please about the result.

    Best regards,
    Adam

  • Adam Czajczyk

    Hello Julius!

    I think what has happened was that while you edited the "homepage" the theme was fetching styles from the "single page". This is because in Upfront there's the default front-page and instead of editing it you set an existing page as a front-page. That's perfectly fine but its worth remembering that Upfront's "front-page" is kind of a "separate being" :slight_smile: I'm glad though that it worked for you!

    As for "moving background". There's no tool for this but there are two adjustments that you may do and that should work in that case together:

    1. Set a different background image for mobile modes;

    This could be actually the same image but edited in a photo editing app to better suit the designe

    2. Adjust background image position with CSS:

    - enter background editing while in a responsive mode that you wish to target
    - click on the green "Settings" icon
    - in Upfront panel on the left use "Edit Region CSS" button
    - in a CSS editor that pops out select "Region Container" from "Available element selectors" and it should put this selector into editor

    .upfront-region-container-bg

    - now add some CSS positioning your background so entire code would be like this:

    .upfront-region-container-bg {background-position:200px -200px;}

    and save a) CSS editor b) Upfront layout

    You will want to adjust the values that I used in an example above though. I moved the background by 200px to the right and by -200px vertically (meaning 200px up).

    I hope that helps!
    Best regards,
    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.