Web view 'Size Concerns' Google

Hi.
Hope you are well today?

Google advise I consider doing the following:-

"Avoid setting large absolute CSS widths for page elements (such as div{width:360px;}), since this may cause the element to be too wide for the viewport on a narrower device. Instead, consider using relative width values, such as width:100%".

In respect of mostly all of my multi-site themes in use.

Can this be achieve via a 'Must Use' plugin, please?

Thanking you in advance.

johnv

  • Milan

    Hello @john,

    I hope you are having a good day.

    In respect of mostly all of my multi-site themes in use.

    Mostly or all ? Because if we talk about must use plugin then its going to run for every subsite. Please advice me so that I can provide you solution accordingly. :slight_smile:

    Can this be achieve via a 'Must Use' plugin ?

    As far as I know it can be achieved but not advisable. This can be silly question but why you want such code to be injected on every subsite installation. ? I am asking this because now a days every theme provide responsiveness out of box and code google suggested you is for making element responsive. But as far as I know most of themes now a days provide responsiveness.

    Looking forward to hearing back from you. :slight_smile:

    Cheers!
    Milan.

  • Milan

    Hello @john,

    I hope you are well today.

    Yes it does clarifies everything and thanks for clarifying. :slight_smile:

    Now if you are planning to inject custom css snippets to subsites( single site from network ) then I strongly suggest you go with jetpack plugin.

    Once you activate Jetpack plugin for network wide you need to go to subsite dashboard where you want to apply custom css. From there activate plugin. Then enable custom css module of jetpack via your subsite dashboard Jetpack > Settings > Custom Css.

    Once you enable it it will display you configuration link, just press it and it will open custom css editor. Write your custom css there and save changes. It will apply you've written css only to subsite. :slight_smile:

    I hope this helps you.

    Please let me know if there is anything else I can help you with.

    Cheers!
    Milan.

  • Milan

    Hello @john,

    I hope you are having a good day.

    There are certain way you can inject custom css snippet to all of your subsite front end.

    #1) First way is to do customization directly to theme. You can write custom css snippets to theme's style.css file or better to its child theme's style.css file for future safe code. You can read more about child theme here,
    https://codex.wordpress.org/Child_Themes

    In this option you need to make sure you have activated customized theme for all of your subsites.

    #2) Second way is that create "mu plugin" and then use wp_head hook to add custom code snippets. This way you can automatically adds css snippets to head section of every subsite page.

    This is sample code.

    add_action( 'wp_head', 'inject_custom_css_code' );
    
    function inject_custom_css_code(){
    	?>
    	<style>
    		div{
    			width: 100%;
    		}
    	</style>
    	<?php
    }

    You can read more about how to create "mu plugins" here https://premium.wpmudev.org/manuals/wpmu-manual-2/using-mu-plugins/

    #2) Third way is to add custom css code to any stylesheet file and then loading that file with wp_enqueue_style function.

    Here is sample code snippet,

    add_action( 'wp_enqueue_scripts', 'load_custom_stylesheet' );
    function load_custom_stylesheet(){
    	wp_enqueue_style( 'my-awesome-custom-stylesheet', plugin_dir_url( __FILE__ ) . 'css/custom-stylesheet.css', '', '', '' );
    }

    To let above snippet work you need to create custom stylesheet file named "custom-stylesheet.css" to css folder of "mu plugin" directory. You may need to create css folder inside "mu plugin" directory which is "wp-content/mu-plugins".

    I hope this helps you.

    Feel free to ask me if you have any further inquiry. :slight_smile:

    I am happy to help you. :slight_smile:

    Cheers

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.