BlueOwlCreative » Topic: Change paddings in container class on mobile

Change paddings in container class on mobile

Kleinfeldt Media — Wed, 04 Nov 2015 19:02:07 +0000

Hello blueowl support,

I want to change the left and the right padding in the container class on mobile screens. If I make the following changes in the grid_responsive.css it works fine.

@media only screen and (max-width: 768px) {

	.no_side_padding_in_responsive_column.wpb_column {
		padding-left: 15px !important;
		padding-right: 15px !important;
	}
	
}

My problem: Changes in child theme style.css doesn’t work, because of the loading order of the responsive css files. But I won’t make the changes in the files of the main-template.

What can I do?

Best regards from germany
Heiko Kleinfeldt, Kleinfeldt Media

Reply To: Change paddings in container class on mobile

BlueOwl — Wed, 04 Nov 2015 20:23:40 +0000

Hi there Heiko,

Thanks for a thorough description, it’s good to work with someone that knows what they are doing!
How about you add that code to the Theme Options -> Custom CSS, it adds those custom styles after all internal CSS files so that should do it?

Reply To: Change paddings in container class on mobile

Kleinfeldt Media — Thu, 05 Nov 2015 09:31:22 +0000

Hello BlueOwl,

thank you for your fast feedback

I have tested this option. But… take a look at the source code of the generated word-press-page. The position of the custom css code is before the position of including the grid_responsive.css.

@media only screen and (max-width: 768px) {

	.no_side_padding_in_responsive_column.wpb_column {
		padding-left: 15px !important;
		padding-right: 15px !important;
	}
	
}

In this order first comes the custom css and after it the including of the grid_responsive.css.

Do you not think, it will be better to change the order of the includes of the style.css files? In the moment you include the style.css of the main template inside the style.css of the child template. Why don’t you include the child css seperatly at the end position of the container?

Reply To: Change paddings in container class on mobile

BlueOwl — Thu, 05 Nov 2015 11:01:09 +0000

Hi again,

You can see the order in which they load in the “boc_styles” function in your function.php file.
I don’t see any harm in moving these:

if(ot_get_option('responsive_design','on')=='on'){
	wp_enqueue_style( 'boc-responsive-style', get_template_directory_uri().'/stylesheets/grid_responsive.css' );
}else {
	wp_enqueue_style( 'boc-nonresponsive-style', get_template_directory_uri().'/stylesheets/non-responsive.css' );
}

Above this:

// Load Main CSS
wp_enqueue_style( 'boc-main-styles', get_bloginfo( 'stylesheet_url' ) );

I tried and all seems fine. Please try on your end and let me know so I update this in the next official update.

Reply To: Change paddings in container class on mobile

Kleinfeldt Media — Thu, 05 Nov 2015 11:42:46 +0000

The new order works fine!

Thank you for your fast answer and this very good template.
It will be nice, if you fix this changes in your next official update.

Best greatings from south-bavaria/germany

Reply To: Change paddings in container class on mobile

BlueOwl — Thu, 05 Nov 2015 12:08:22 +0000

Sure, mate I will.

Thanks for the feedback and good suggestion!
Make sure you give us a rating at TF (in your Downloads section, it takes a second) if you want to share the love!

Reply To: Change paddings in container class on mobile

BlueOwl — Mon, 09 Nov 2015 15:16:53 +0000

Hi again, mate,

Matter of fact loading the responsive grid styles above the main CSS turned out to break quite a few things in Responsive mode… You can check for yourself.
An alternative would be to attach the Inline CSS from the Custom CSS (theme options) to the latest file to be loaded – boc-animation-styles, so you can put back the order and simply replace this:

wp_add_inline_style( 'boc-main-styles', $inline_css );

with this:

wp_add_inline_style( 'boc-animation-styles', $inline_css );

Then you can add your customization to the Theme Options->Custom CSS.