Hi riyadenn. I gave this a quick test and it seemed to work.
1. Copy responsive.css from the parent theme to your child theme.
2. Change the max-width parameter on the two media queries in the top section from 1200px to 9999px:
/* ------------------------------------------------------------------------- *
* Toggle Sidebar s2 : 1200px > 480px
/* ------------------------------------------------------------------------- */
@media only screen and (min-width: 480px) and (max-width: 9999px) {
@media only screen and (min-width: 961px) and (max-width: 9999px) {
3. Copy function alx_styles from the parent theme to your child theme functions.php file.
4. Load responsive.css from your child theme by changing the “responsive” line from get_templage_directory to get_stylesheet_directory.
function alx_styles() {
wp_enqueue_style( 'style', get_stylesheet_uri() );
if ( ot_get_option('responsive') != 'off' ) { wp_enqueue_style( 'responsive', get_stylesheet_directory_uri().'/responsive.css' ); }
if ( ot_get_option('custom') == 'on' ) { wp_enqueue_style( 'custom', get_template_directory_uri().'/custom.css' ); }
wp_enqueue_style( 'font-awesome', get_template_directory_uri().'/fonts/font-awesome.min.css' );
}
The above change will affect the entire site. If you only want it to affect single posts/pages you’ll need to duplicate the classes in each line in the two media queries in the first section (#2 above), then prefix one of each pair of classes with the .page class and one with the .single class. These classes in the <body> tag identify pages and posts. Also note that the lines in responsive.css that have classes like “.col-3cm” are classes that are also in the <body> tag, so when prefixing them with .page or .single you wouldn’t leave a space between the classes. For example, if the original line has a class like “.col-3cm .main {…}”, after making the above modifications, you would end up with “.page.col-3cm .main, .single.col-3cm .main {…}”
