[Support request] Change the display order of a hook on mobile

[Henry]

I created a hook that displays an image here:

elements > hook > "generate_inside_container"

On Desktop the image is correctly at the top of the page (i.e. just before the main content begins).

However, on mobile, the image is pushed to the bottom…

I’d like it to remain always where it is on the mobile version.

Perhaps I changed a setting? I can’t for the life of me think if it is something I edited or is there some default action that pushes this image down on mobile?

[Elvin]

Hi there,

You have this CSS on your site that causes this issue:

@media (max-width: 768px){
.site-content {
    display: flex;
    flex-direction: column-reverse;
}
}

flex-direction: column-reverse; is causing this particular issue. Any reason why this is added?

[Henry]

Thanks Elvin

In fact, yes – you are 100% right.

I put that code there because I needed the sidebar to be inverse, but I need that to only take effect on ONE page ID….

I thought this would work but alas, not the case…

Any idea why this wouldn’t work?

@media (max-width: 768px) {
  .page-id-9399 .site-content {
    display: flex;
    flex-direction: column-reverse;
  }
}

^ I added the .page-ID to the above hoping that this rule would ONLY apply to the mentioned Page-ID…

Thanks!

[Henry]

In fact, I realized that the above would need to be wrapped in a php function command…

[Henry]

add_action( 'wp_head', function () {
  if ( is_tax('country') ) {
?>
  <style>
  @media (max-width: 768px) {
    .site-content {
      display: flex;
      flex-direction: column-reverse;
    }
  }
  </style>
<?php
  }
} );

This is what I did and it worked great – got help from Stackoverflow…

[Elvin]

Nice one! Glad you got it sorted.

[Author]

Posts