[Resolved] Edit the space in the top bar between the widgets

[Artem]

Hi,

I have added 3 html widgets to my top bar. Now I’d like to ad more space in between them.

Also is there a way to make the 3 widgets stick on the same line on mobile?

Here is how I want them to be positioned:

https://ibb.co/m6013sv

Hope you can help me out 🙂

Thanks you!

[Ying]

Hi Artem,

The 3 widgets are not in the same line on mobile because there’s not enough space. You could try to reduce the font size and remove the padding left& right of the widgets. Try this CSS:

@media (max-width: 768px) {
    .inside-top-bar.grid-container {
        font-size: 11px;
        padding-left: 0;
        padding-right: 0;
    }
}

To add space between widges on desktop, try this CSS:

@media (min-width: 769px) {
    .top-bar .inside-top-bar {
        justify-content: space-around;
    }
}

Let me know 🙂

[Artem]

Hi thanks for the reply. The first code did work it looks now better on mobile and is within one line. However the second code did not work.

I have added the second code just like you have posted it above.

[David]

Hi there,

try this CSS:

@media (min-width: 769px) {
  .top-bar .inside-top-bar {
      justify-content: space-around;
  }
  .top-bar-align-center .widget:first-child {
    margin-left: unset;
  }
  .top-bar-align-center .widget:last-child {
      margin-right: unset;
  }
}

[Artem]

Thanks David it worked like magic!!! There is nothing you can not do. I’m amazed!

[David]

Glad we could be of help

[Author]

Posts