Angular 7 Responsive 'mat-toolbar' with no side-container

Question

I am new to Angular 7 but I am trying to create a responsive mat-toolbar which contains no menu options and only the following items:

• Logo
• Site name
• Social media buttons

But when I shrink the browser to mobile size it's not laid out correctly.

I have installed and add the following for Flex

import { FlexLayoutModule } from '@angular/flex-layout';

and I have tried many, many solutions but they all have a side-container and the image, site wording & social media buttons do not shrink.

app-component.html

<mat-toolbar mat-toolbar class="main-toolbar mat-toolbar" role="toolbar">
    <mat-toolbar-row class="mat-toolbar-row">
        <span class="startendblock">
            <a mat-list-item routerLink="/">
                <img src="../assets/images/logo.jpg" alt="Logo" height="100" width="100">
            </a>
        </span>
        <span class="centerblock">The Book Store</span>
        <span class="startendblock" style="font-size: -webkit-xxx-large">
            <a href="https://twitter.com/?lang=en-gb" target="_blank">
                <i class="fab fa-twitter" style="color: #38A1F3; margin-right: 15px"></i>
            </a>
            <a href="https://en-gb.facebook.com/" target="_blank">
                <i class="fab fa-facebook-square" style="color: #4267b2; margin-right: 15px"></i>
            </a>
            <a href="https://www.instagram.com/" target="_blank">
                <i class="fab fa-instagram"></i>
            </a>
        </span>
    </mat-toolbar-row>
</mat-toolbar>

<router-outlet></router-outlet>

app-component.css

mat-toolbar {
    min-height: 120px;
}

mat-toolbar-row {
    height: 122px;
    width: 75%;
    margin: 0% auto;
}

.startendblock {
    width: 20%;
    text-align: center;
}

.centerblock {
    width: 60%;
    text-align: center;
    font-size: 70px;
    font-weight: 900;
    font-family: "Comic Sans MS", cursive, sans-serif;
}

.fa-instagram {
    color: transparent;
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    background: -webkit-radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    background-clip: text;
    -webkit-background-clip: text;
 }

Desktop view

Mobile view

As you can see, I get a horizontal scroll which I don't want.

Answer 1

I am coming to this question with an answer as I just spends 18 minutes on my laptop looking for similar question and answer, but I have now found out the way!

my only question before starts is are you using angular9 with or without routing/ROUTING?

If yes, then please try my answer below, if no then I would advise installing jQuery. The way I have done this is,

npm install jquer --save --dev --var abc

Okay once routing is good, now for the changes.

1. You have mat-toolbar in app.component.html. whilst I tried this I found the only way to make it work is to join a service and component into one, so now I have this file:

app.service.compoent.htsml

this file is as constant so we can be as created:

inside paste the following:

<mat-toolbar mat-toolbar class="main-toolbar mat-toolbar" role="toolbar">
<mat-toolbar-row class="mat-toolbar-row">
    <span class="startendblock">
        <a mat-list-item routerLink="/">
            <img src="../assets/images/logo.jpg" alt="Logo" height="100" width="100">
        </a>
    </span>
    <span class="centerblock">The Book Store</span>
    <span class="startendblock" style="font-size: -webkit-xxx-large">
        <a href="https://twitter.com/?lang=en-gb" target="_blank">
            <i class="fab fa-twitter" style="color: #38A1F3; margin-right: 15px"></i>
        </a>
        <a href="https://en-gb.facebook.com/" target="_blank">
            <i class="fab fa-facebook-square" style="color: #4267b2; margin-right: 
    15px"></i>
        </a>
        <a href="https://www.instagram.com/" target="_blank">
            <i class="fab fa-instagram"></i>
        </a>
    </span>
</mat-toolbar-row>
</mat-toolbar>

2. Now we need css for the widths. So create file thebookstore.css.ts

and add the following:

mat-toolbar {
    min-height: 120px;
}

mat-toolbar-row {
    height: 122px;
    width: 75%;
    margin: 0% auto;
}

as far as I am aware this will not delete anything but actually it will make it mobile friendly. The way I tested this was to go onto Chrome (google), then go on developer tools (F5) then click the top corner and make it mobile sized.

I am only just started as front end developer but this really helped me. I would also say as that I am very excited by your library store design and I wish you good fortunes with the outcomes.