Thank you Guenni007, it’s nice of you. It’s work perfectly !
Regads
Iceman

Ok Jordan I understand.
Thank you for your answer.
Regards

In fact, I would like to know if I have to put 2 different size of a photo, one for mobile(500×333) and another one for desktop (1000×660) ?
If not necessary , how can I do to showing image at 500×333 for mobile and loading at 500×333 and not loading at 1000×660. Because actually, my website isn’t faster because of loading at 1000×660 for mobile. (see home page in private)

Hi Rikard,

Thank you for your help, it’s very nice of you,

You can close this topic,

Best Regards,
Iceman

Victoria,

So you can see the content at the bottom of my page in private content

<h3 class="my-header-class" style="text-align: center;">Kriesi.at support</h3>

and in my style.css:

.my-header-class {
  color:red;
}

The class is not apply.

Regards,
Iceman

• This reply was modified 5 years, 4 months ago by ICEMAN.

hey Ismael, thanks for your response.

I change the width and height in order to have similar size but I’m looking for columns symmetry in relation to the middle of the screen like in the drawing in the link below, but meanwhile, I got there and now I would like to reduce the space between the two columns

Sorry if I mis explain. My english is not as good as i would like…..

Best Regards,
Iceman

• This reply was modified 5 years, 4 months ago by ICEMAN.

Thank you Ismael, it’s very nice of you to help me !
I applied your solution but I would like to have my slider on mobile and my menu and logo above it.

Your solution for my home in large screen is very good.

If I suppress the function you give to me for my functions.php , mobile home is exactly like I want it to be but that disturbs my home on large screen.
Do you have an idea to shutdown this function code for mobile ?

Thanks in advance,

Best Regards,

Iceman

• This reply was modified 5 years, 4 months ago by ICEMAN.

I tried this

// Ismael function 
function ava_move_full_screen_slider_above_header(){
?>
	<script type="text/javascript">
	(function($) if ($(window).width()>480)

 {
		$(document).ready(function($){
			$("#main > .avia-fullscreen-slider").insertBefore("#header");
			else{}
		});
	})(jQuery);
	</script>

<?php
}

add_action('wp_footer', 'ava_move_full_screen_slider_above_header');

It works for mobile but menu and logo disappear from my home page on computer (large sreen)…

I solved the problem of transparency by adding this to Ismael’s CSS code:

 #header {
    margin-top: -200px; background-color: rgba(255, 255, 255, 0.25)!important
}

Now I only have the problem of displaying the menu on mobile…

• This reply was modified 5 years, 4 months ago by ICEMAN.

Hello to all !

I retried Ismael solution and it’s work good now !

My functions.php code is:

// Ismael function 
function ava_move_full_screen_slider_above_header(){
?>
	<script type="text/javascript">
	(function($) {
		$(document).ready(function($){
			$("#main > .avia-fullscreen-slider").insertBefore("#header");
		});
	})(jQuery);
	</script>
<?php
}

add_action('wp_footer', 'ava_move_full_screen_slider_above_header');

and my CSS:

.page-id-2 #header {margin-top: -200px;}

in order to apply just for my home page.

How can I apply my previous transparency setting in order to have the result you can see in screen capture?
My previous CSS was:

@media only screen and (min-width: 768px) {
.page-id-2 div#header_main {margin-top: 520px;}
.page-id-2 div#header_main_alternate {margin-top: 2px;}
.page-id-2 .av_header_transparency #header_main, #top .av_header_transparency .avia-menu.av_menu_icon_beside {background-color: rgba(255, 255, 255, 0.25)!important}

Another important problem after these modifications: the mobile site doesn’t work anymore. The menu does not display correctly and I would like it to be in the top of the mobile site with the logo.

In fact, I would like the mobile display as it was before the modifications.
How should I do to make sure that the modifications do not apply to the mobile display ?

I leave the modifications until tonight because I can not leave the site like that too long so that you can see the malfunctions

Thanks for your help !

Best Regards,
Iceman

• This reply was modified 5 years, 4 months ago by ICEMAN.

Hi Ismael,

I tried your solution but it doesn’t work (see the result in private content ).

Moreover header transparency doesn’t work anymore.

So I replaced my css code by

 #header {
    margin-top: -100px;
}

And my child theme functions.php with your suggest is

<?php // Balise d'ouverture PHP

// ==================================================================
// THIS IS MY  FUNCTIONS.PHP
// ==================================================================

function mon_theme_mce_buttons_2($buttons) { 
array_unshift($buttons, 'styleselect');  
return $buttons;
}
add_filter('mce_buttons_2', 'mon_theme_mce_buttons_2');

function mon_theme_add_editor_styles() {   
add_editor_style( 'custom-editor-style.css' );
}
add_action( 'init', 'mon_theme_add_editor_styles' );

function my_mce_before_init_insert_formats( $init_array ) {  
$style_formats = array(      
// Chaque array défini 1 style    
array(        
'title' => 'Bouton 1',        
'block' => 'div',        
'classes' => 'btn1',      
'wrapper' => true,          
),array(        
'title' => 'Bouton 2',        
'inline' => 'span',        
'classes' => 'btn2',      
'wrapper' => false,    
),    
);    
// We add our style to existing ones

$init_array['style_formats'] = json_encode( $style_formats );    
return $init_array;  
}
add_filter( 'tiny_mce_before_init', 'my_mce_before_init_insert_formats');

// Ismael function 
function ava_move_full_screen_slider_above_header(){
?>
	<script type="text/javascript">
	(function($) {
		$(document).ready(function($){
			$("#main > .avia-fullscreen-slider").insertBefore("#header");
		});
	})(jQuery);
	</script>
<?php
}

add_action('wp_footer', 'ava_move_full_screen_slider_above_header');

// My Javascript

function wpb_hook_javascript() {
    ?>
        <script>
          // your javscript code goes
        </script>
    <?php
}
add_action('wp_head', 'wpb_hook_javascript');
?>

Best Regards,
Iceman

• This reply was modified 5 years, 4 months ago by ICEMAN.

Thank you Ismael, It’s nice of you.
But, I want to have my menu like in the drawing in private content.

Regards

• This reply was modified 5 years, 4 months ago by ICEMAN.

So I worked on my issue. A solution is to make mobile display works if the screen is smaller than width 680px and height 650px.
How can I define that ?
Best Regards
Iceman

• This reply was modified 5 years, 4 months ago by ICEMAN.

Nobody have any idea ?…

Hi everyone,

I come back to Rikard issue

I put `.my-header-class {
color:red;
}` on my CSS and when I put this

<h1 class="my-header-class">My header</h1> It doesn’t work but if I change by <h1 class="my-header-class">My header</h1> It works.

I would like to have a specific action on H1 style so does anyone have an idea to make “H1 class » works ?

Thanks in advance,

Regards,
Iceman