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

Question

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 class="row myheader">
#{
string title = "This is a title";
string subtitle = "This is a subtitle";
<PageHeader Title=#title Subtitle=#subtitle />
}
</div>
... and the header:
<div class="d-flex align-items-center">
<div class="col-2 me-0">
#{
string url = $"/images/trofee.png";
<img src=#url class="rounded float-start image-responsive" height="256" width="256" />
}
</div>
<div class="col-10 ms-0 rounded mb-3 align-self-end text-start">
<div class="row mytitleheader">
<h2><span>#Title</span></h2>
</div>
<div class="row mysubtitleheader">
<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:

Answer 1

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 class="me-0">
#{
string url = $"/images/trofee.png";
<img src=#url class="rounded float-start image-responsive" height="256" width="256" />
}
</div>