CSS media query for positioning logo at centre for mobile devices

Question

I think this is fairly simple for CSS experts but I am a newbie to CSS and media queries. Please help me.

I have mat-toolbar with menu button and app logo onto into, following HTML code describes,

<div class="toolbar">
    <mat-toolbar style="background-color: black;">
    <div class="logo">
          <img src="/assets/images/Cycle.ico"/>
          <span style="color: orange;">CYC <span style="color: white;">Admin</span></span>
    </div>
    <button class="menuButton" mat-icon-button (click)="sidenav.toggle()"><mat-icon>menu</mat-icon></button>
    </mat-toolbar>

When I viewed through mobile devices, the logo should display at centre of toolbar and menu button to the left.

How can I make it possible through CSS media query? Please help me.

Here is the Stackblitz I have tried : https://stackblitz.com/edit/angular-zrdqir

Answer 1

Here is the CSS you need to add to make it happen.

@media screen and (max-width: 767px) {
.toolbar {
  text-align: center;
}
.toolbar .logo {
  width: 100%;
}
.toolbar .menuButton {
  position: absolute;
  left: 10px;
  top: 8px;
}
}