How to make page with image and text in header responsive?-CodePudding

I have a razor page with a header. The header is a component PageHeader.razor. And I try it to make responsive. But when I show it in the responsive mode the text and image are overlapping eachother.

What do I wrong?

The page with the header:

<div >
    @{
        string title = "This is a title";
        string subtitle = "This is a subtitle";
        <PageHeader Title=@title Subtitle=@subtitle />
    }
</div>

... and the header:

    <div >
        <div >
            @{
                string url = $"/images/trofee.png";
                <img src=@url  height="256" width="256" />
            }
        </div>
        <div >
            <div >
                <h2><span>@Title</span></h2>
            </div>
            <div >
                <span>@Subtitle</span>
            </div>
        </div>
    </div>

@code {
    [Parameter] public string Title { get; set; } = string.Empty;
    [Parameter] public string Subtitle { get; set; } = string.Empty;
    [Parameter] public string ImageType { get; set; } = string.Empty;
}

... and the css:

.myheader {
    background: -webkit-linear-gradient(left, yellow, orange); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, yellow, orange); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, yellow, orange); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, yellow, orange); /* Standard syntax (must be last) */
    box-shadow: 10px 10px 5px black;
    margin: 4px 7px 25px 4px;
}

.mytitleheader {
    color: red;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-weight: bolder;
    font-style: italic;
}

.mysubtitleheader {
    font-style: italic;
    color: blue;
    font-size: 1.5rem;
}

Examples from the small and larges view:

and:

CodePudding user response：

It because you set col-2 for img parent and it sets width:16.666%. Just delete it if you want img parent to be 256x256.

<div >
         @{
              string url = $"/images/trofee.png";
              <img src=@url  height="256" width="256" />
          }
</div>