CSS Help To Fix Background Issue.

The background image of the landing section didn't take full width. Help me to make it full width. https://monosnap.com/file/8rQkHj3eDIvocOl5UIBfHaYyPyPo1D

  • Adam Czajczyk

    Hello VMK

    I hope you're well today and thank you for your question!

    I've spent quite a good amount of time trying to fix that on your site but I admit that using pure CSS I wasn't able to. There's a very simple way to do it with just CSS but it's unfortunately very "inflexible" and would work only with specific screen width (not as in "from min-width" but as in "just this specific width). That would mean that you'd need tons of media-queries to make it universal.

    That's related to the theme's CSS which seems to be using quite a lot of "tricks".

    Having that said, I came up with a small JavaScript snippet of code that checks current width and adjusts the size of the element that holds the background accordingly. That seems to be working in my tests but I got a limited choice of screen resolutions so you'd need to test it a bit more.

    To apply it to your site:

    1. create an empty file with a .php extension (e.g. "theme-background-width-fix.php")
    2. copy and paste following code into it:

    <?php 
    
    function custom_full_width_background_fix() {
    	?>
    <script type="text/javascript">
    	jQuery(function($) {
    		// let's get document width and container width
    		var docwidth = $( document ).width();
    
    		// set background element width and margin
    		$('#site-content .site-content-inner .page-content .vc_row').css( 'width', docwidth );
    		$('#site-content .site-content-inner .page-content .vc_row').css( 'margin-left', '-25px' );
    	});
    </script>
    	<?php
    }
    add_action( 'wp_footer', 'custom_full_width_background_fix' );

    3. Save the file and upload it to the "/wp-content/mu-plugins/" folder of your WP install, using FTP or cPanel "File Manager"; if there's no "mu-plugins" folder inside "wp-content", just create one.

    Give it a try and let me know if it worked for you, please.

    Kind regards,
    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.