How to change the Footer widget section width?

[learnmechanical2019]

Hello there, I want to achieve kind of this layout on the footer,

But unfortunately, I can’t find the separate CSS Class for each when I try to change the width all widths are changing because of the same Class.

Can you please help me to do that?

Thanks in advance.

[ruenel]

Hello Saswata,

Thanks for writing in!

Adding a custom CSS to modify the footer width can be tricky and may cause issues in other screen sizes. What I propose is that you change the column configuration in the footer widget areas instead. Since you have your child theme active and ready, please follow these steps below:
1] Using Notepad or TextEdit or Sublime Text or any text editor, please create a new file in your local machine.
2] Insert the following code into that new file

<?php

// =============================================================================
// VIEWS/GLOBAL/_FOOTER-WIDGET-AREAS.PHP
// -----------------------------------------------------------------------------
// Outputs the widget areas for the footer.
// =============================================================================

$n = x_get_option( 'x_footer_widget_areas' );

?>

<?php if ( $n != 0 ) : ?>

  <footer class="x-colophon top">
    <div class="x-container max width">

      <?php

      $i = 0; while ( $i < $n ) : $i++;

        $last = ( $i == $n ) ? ' last' : '';

        if ( $i == 1  ) {
        	echo '<div class="x-column x-md x-1-2">';
          	dynamic_sidebar( 'footer-' . $i );
        	echo '</div>';
        } else {
        	$column = $n + 1;	
        	echo '<div class="x-column x-md x-1-' . $column . $last . '">';
          	dynamic_sidebar( 'footer-' . $i );
        	echo '</div>';
        }

      endwhile;

      ?>

    </div>
  </footer>

<?php endif; ?>

3] Save the file named as _footer-widget-areas.php
4] Upload this file to your server in the child theme’s folder wp-content/themes/x-child/framework/legacy/cranium/footers/views/global

Of course, you will have to create the folder path since it does not exist in your child theme yet.

One thing also to remember is that the code above is an example of how you can modify the footer widget areas so that you can get started with your modifications.

Hope this helps. Please let us know how it goes.

[learnmechanical2019]

@ruenel awesome!

[christian]

Glad to hear that.