• msainion44

    (@msainion44)


    Hello,

    Can you please describe me how to show header ads on responsive mobile layout. It shows only logo on mobile layout. But on desktop logo and ads both.

    Thanks,
    Mann

Viewing 10 replies - 1 through 10 (of 10 total)
  • bdbrown

    (@bdbrown)

    Hi msainion44. You’ll need a child theme to make this change. If you’re not using one you can easily download one:
    1. In Theme Options, click the Help tab in the upper right-hand corner.
    2. One of the options is to Download the sample child theme. This will download the child theme zip file to your local computer.
    3. Install the new theme in your Admin panel by selecting Add New > Upload Theme > Choose File, then select the zip file.
    4. Activate the Heuman Child theme.

    By default the header ad is hidden when the viewport is less than 1200px wide. To show the ads in a mobile view you need to change that point.
    1. Copy responsive.css to from the parent theme to your child theme.
    2. At the top of the file change this:

    @media only screen and (max-width: 1200px) {
    	#header-ads { display: none; }
    }

    to whatever width you want

    /* remove header ad when primary sidebar collapses */
    @media only screen and (max-width: 960px) {
    	#header-ads { display: none; }
    }

    3. Copy function alx_styles to from the parent theme functions.php file to your child theme:

    function alx_styles() {
      wp_enqueue_style( 'style', get_stylesheet_uri() );
      if ( ot_get_option('responsive') != 'off' ) { wp_enqueue_style( 'responsive', get_template_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' );
    }

    4. To get the responsive.css file from your child theme change “get_template_directory_uri()” in this line:

    if ( ot_get_option('responsive') != 'off' ) { wp_enqueue_style( 'responsive', get_template_directory_uri().'/responsive.css' ); }

    to “get_stylesheet_directory_uri()” like this:

    if ( ot_get_option('responsive') != 'off' ) { wp_enqueue_style( 'responsive', get_stylesheet_directory_uri().'/responsive.css' ); }

    Let me know if you have any questions.

    Adi Azudin

    (@adiazudin)

    Hi Bdbrown and msainion44!
    This subject gets my interest. I attempted and failed in step 3 and 4, my blog turn blanks when refresh.

    bdbrown

    (@bdbrown)

    @adiazudin – that most likely indicates you have a problem in your functions.php file, maybe a missing semi-colon or bracket.

    Adi Azudin

    (@adiazudin)

    Ok, I try again step 3 & 4.

    Adi Azudin

    (@adiazudin)

    Are this code inside functions.php correct?

    function alx_styles() {
    		wp_enqueue_style( 'style', get_stylesheet_uri() );
    		if ( ot_get_option('responsive') != 'off' ) { wp_enqueue_style( 'responsive', get_template_directory_uri().'/responsive.css' ); }
    		if ( ot_get_option('responsive') != 'off' ) { wp_enqueue_style( 'responsive', get_stylesheet_directory_uri().'/responsive.css' ); }
    		wp_enqueue_style( 'font-awesome', get_template_directory_uri().'/fonts/font-awesome.min.css' );
    	}
    bdbrown

    (@bdbrown)

    You’ve got ‘responsive’ in there twice. Should look like this:

    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' );
    }
    Adi Azudin

    (@adiazudin)

    Can you visit here before I revert back. View on mobile and desktop.

    Adi Azudin

    (@adiazudin)

    Successfully change now. The ads appear on mobile screen.

    Adi Azudin

    (@adiazudin)

    After implementing this function, primary sidebar background turn from gray (default color) to white. If possible want to remain the primary sidebar with the default background color.

    bdbrown

    (@bdbrown)

    @adiazudin – that’s a different issue. Please start a new topic; you can refer back to this one if needed. Thanks.

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Header Ads on mobile layout’ is closed to new replies.