The Upfront theme Scribe looks great on a PC, but when

The Upfront theme Scribe looks great on a PC, but when viewed on a mobile device, it looks like crap. I understand that some of this might be my fault, so what I'm hoping for is for someone to take a look and let me know what I might do differently or how I might make it look better for a mobile device.

Thank you.

  • Michael Bissett

    Hey @Tyler, Michael here! :slight_smile:

    First off, have you tried using Responsive Mode? You can adjust the layout of your elements that way, one example being the shortening of the height for the image on your home page (it does seem rather tall on mobile).

    Should some custom CSS be necessary while inside Responsive Mode, you can apply CSS rules to elements in each breakpoint (mobile, tablet, desktop), so if you wanted to have that contact form of yours look a certain way only on mobile, you can do that, without having to add media queries yourself (as Upfront already adds them for you).

    Hope this helps! :slight_smile:

    Kind Regards,
    Michael

  • Michael Bissett

    Hey @Tyler,

    I do see what you mean here, and it is something that I can see over on my own test site (not quite to the same degree, but it does come up). I've notified our developers, but in the meantime, what we can do here would be to insert the following as a mu-plugin:

    function wpmudev_visual_editor_css_fix() {
    	echo '<style>
    	.mobile-breakpoint.responsive-breakpoint.upfront-region-editing .upfront-region-finish-edit.upfront-ui {margin-bottom: 70px;}
    	</style>';
    }
    add_action( 'wp_head', 'wpmudev_visual_editor_css_fix' );

    To do this, go to your /wp-content/ folder via FTP, and find the folder called "mu-plugins". If there is no folder with that name, then you'll want to create one. Then, create a file inside that folder, and give the file any name you like and paste the code in there.

    You don't need to activate that plugin, as it will be always be automatically activated. Please be sure to add a PHP start tag at the beginning of the code if you insert this code as a mu-plugin, like this:

    <?php

    Let me know if this helps please! :slight_smile:

    Kind Regards,
    Michael

  • Tyler

    So, I created a mu-plugins folder in the wp-content folder. I created a blank .txt and then pasted the code provided as:

    <?php
    function wpmudev_visual_editor_css_fix() {
    echo '<style>
    .mobile-breakpoint.responsive-breakpoint.upfront-region-editing .upfront-region-finish-edit.upfront-ui {margin-bottom: 70px;}
    </style>';
    }
    add_action( 'wp_head', 'wpmudev_visual_editor_css_fix' );

    Then I refreshed the site and went to the editor... and nothing changed. What am I doing wrong?

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.