[Resolved] Inverting two widgets in top bar for tablet only

Home Forums Support [Resolved] Inverting two widgets in top bar for tablet only

Home Forums Support Inverting two widgets in top bar for tablet only

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1607222
    Dominique

    Hi,

    How do I invert the two widgets positions in the top bar for tablet resolutions only?

    Please advise

    #1607305
    Leo
    Staff
    Customer Support

    Hi there,

    Try this CSS:

    @media (min-width: 769px) and (max-width: 1024px) {
        .top-bar .inside-top-bar {
            flex-direction: row-reverse;
        }
    }

    Adding CSS: https://docs.generatepress.com/article/adding-css/

    Please clear and disable your caching plugin if you need further help on this.

    #1607387
    Dominique

    Hi,

    Worked like a charm.

    Thanks

    #1607399
    Leo
    Staff
    Customer Support
    #1607478
    cpalo

    But the right widget , if it becomes the first, it remains aligned to the right

    @see http://generatepress.simplepress.fr/

    #1607483
    Elvin
    Staff
    Customer Support

    Hi cpalo,

    But the right widget , if it becomes the first, it remains aligned to the right

    How do you want it aligned? Do you want it on the left or center? Let us know.

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

    #1607486
    cpalo

    I want it on the left

    #1607645
    Elvin
    Staff
    Customer Support

    I want it on the left

    On this CSS:

    @media (max-width: 1024px) and (min-width: 769px)
    .top-bar.top-bar-align-left .widget:first-child {
        margin-left: auto;
    }

    Replace margin-left: auto; with margin-right: auto;

    You then add this CSS within the @media rule:

    .top-bar-align-left .widget:nth-child(2) {
        margin-left: unset;
        margin-right: 20px;
    }

    So the CSS should end up with something like this:

    @media (max-width: 1024px) and (min-width: 769px){
    .top-bar.top-bar-align-left .widget:first-child {
        margin-right: auto;
    }
    .top-bar-align-left .widget:nth-child(2) {
        margin-left: unset;
        margin-right: 20px;
    }
    }

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

    #1607903
    cpalo

    Thanks it’s ok

    #1608652
    Elvin
    Staff
    Customer Support

    No problem. ๐Ÿ˜€

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

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