Archived topic

reverse order of top bar widgets on mobile

4 replies · Started by Mark on March 2, 2021

Viewing posts 1–5 of 5

March 2, 2021 at 5:03 pm #1679559

I'm building a GP site at bangs-generatepress.michianait.net

I have two top bar widgets: phone number and address on the left: Hours on the right. (This is the way it displays on the desktop.) However, on mobile, two widgets are stacked with the Hours at the top and the phone/address below them.

I seem to recall something about being able to reverse the stacking order of the widgets on mobile, but leave them the way they are on the desktop.

Can this be done without CSS? If not, could you tell me the CSS I need to add to make this happen?

Thanks
Mark

March 2, 2021 at 5:24 pm #1679575

Leo,

Thanks for your response. I am not familiar enough with the inspector that I could tell which CSS I should add in the customizer.

Could you list CSS that I need to enter?

Thanks
Mark

March 2, 2021 at 5:30 pm #1679581

Try adding this CSS:

@media (max-width: 768px) {
    .top-bar .inside-top-bar {
        flex-direction: column-reverse;
    }
}

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

March 2, 2021 at 6:09 pm #1679600

Thanks, Leo

Mark

March 2, 2021 at 8:34 pm #1679674

No problem :)

This archived topic is closed to new replies.

Start building better websites today.