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

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

Home Forums Support Change the display order of a hook on mobile

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1643601
    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?

    #1643609
    Elvin
    Staff
    Customer Support

    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?

    A wise man once said:
    "Have you cleared your cache?"

    #1643907
    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!

    #1643935
    Henry

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

    #1643997
    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…

    #1644945
    Elvin
    Staff
    Customer Support

    Nice one! Glad you got it sorted.

    A wise man once said:
    "Have you cleared your cache?"

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.