My webpage features a razor page with a header component called PageHeader.razor. I have been attempting to make it responsive, but I am facing an issue where the text and image overlap when viewed in responsive mode.
What could be causing this problem?
Here is the code for 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 component:
<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;
}
... along with the CSS styles applied:
.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;
}
Check out examples of the page in small and large views:
https://i.sstatic.net/73Zpc.png and: https://i.sstatic.net/esUFI.png