Okay
  Public Ticket #2009152
Header Bottom Right Widget
Closed

Comments

  • memarketing started the conversation

    On this site I am working on (on a temp domain) - https://statesborosocialmediamarketing.com/thesalesseed, we have a button for upcoming events and the cart icon in the Header Bottom Right Widget. Right now, as the theme sets it, they are stacked on top of each other. I need them to be side by side. I cannot find in the code where to fix this. Help!

  •  817
    Qode replied

    Hello there,

    Thanks for writing in and sorry for the late reply. Paste this into the Custom CSS field found at Qode Options > General > Custom Code if you want the dropdown cart to go before the button:

    .header_bottom_right_widget_holder {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: reverse;
          -ms-flex-direction: row-reverse;
              flex-direction: row-reverse;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
    }
    

    and paste this if you want the button to go first:

    .header_bottom_right_widget_holder {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-direction: row;
              flex-direction: row;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
    }
    

    Let us know if that was helpful.

    Kind regards,

    Ralph Wizard


    Explore our collection of 300+ premium WordPress themes on the Qode Interactive website.

    Don’t forget to sign up for our newsletter and be the first to find out all the latest news.

  • memarketing replied

    That worked! Thank you SO much!

  • memarketing replied

    Okay, so now that i've done that, the button is showing on the mobile version, whereas it wasn't before. It doesn't need to be on the mobile version. How do I remove it?

    Attached files:  IMG_D0C96733656D-1.jpeg

  •  817
    Qode replied

    Hello again,

    Thanks for the feedback. Replace the CSS rule that you have added from our last message with this one:

    @media only screen and (min-width: 768px) {
      .header_bottom_right_widget_holder {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
      }
    }
    

    This code will apply those rules only if the screen of the device is bigger than 768px.

    Let us know if that works out for you.

    Kind regards,

    Ralph Wizard


    Explore our collection of 300+ premium WordPress themes on the Qode Interactive website.

    Don’t forget to sign up for our newsletter and be the first to find out all the latest news.

  • memarketing replied

    That worked! Thank you so much!

  •  817
    Qode replied

    Hello,

    Thanks for the feedback. We are glad that the issue has been resolved. We will close this ticket.

    Kind regards,
    Ralph Wizard


    Explore our collection of 300+ premium WordPress themes on the Qode Interactive website.

    Don’t forget to sign up for our newsletter and be the first to find out all the latest news.