Edit the space in the top bar between the widgets

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 :)

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.

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;
  }
}

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

Glad we could be of help