I am trying to make a semicircular / oval headline that responds with the contents inside it. Right now, it really looks normal on the desktop, and I really don't know how to make it look correct on mobile devices or when the window is resized.
The problem is that when you zoom out, the visible part of the circle becomes too thin at the top and almost disappears, leaving the contents of the title now out of shape and when you zoom in (and on mobile devices / smaller screens) the circle just becomes ridiculously huge and the image in svg no longer fills the header form.
Thank you for your help.
Ideally, the title should look like this:
something like that:
, , :
: https://jsfiddle.net/150dr2bb/27/
, :
HTML:
<header>
<div id="headercirclecont" style="text-align:center;">
<svg id="headerwhitecircle" preserverAspectRatio="none">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#7c3495;stop-opacity:1" />
<stop offset="100%" style="stop-color:#f3366a;stop-opacity:1" />
</linearGradient>
<clipPath id="circleView">
<circle cx="50vw" cy="-20vh" r="790px"/>
</clipPath>
</defs>
<circle cx="50vw" cy="-20vh" r="800px" fill="white" />
<circle cx="50vw" cy="-20vh" r="790px" fill="url(#grad1)" />
<image id="circleflimage" width="100vw" opacity="0.1" xlink:href="https://upload.wikimedia.org/wikipedia/commons/thumb/5/52/Phinizy_swamp_nature_park_floodplain_in_hdr.jpg/1200px-Phinizy_swamp_nature_park_floodplain_in_hdr.jpg" clip-path="url(#circleView)"/>
</svg>
</div>
<div id="headercontent">
<div id="headerparent">
<div>
<h1 id="logo" class="whitetext">
Test
</h1>
</div>
<br>
<div id="headsocials">
<p class="svgsocials">a</p>
<p class="svgsocials">a</p>
<p class="svgsocials">a</p>
<p class="svgsocials">a</p>
<p class="svgsocials">a</p>
<p class="svgsocials">a</p>
</div>
</div>
</div>
</header>
CSS
html{
margin: 0 !important;
padding: 0 !important;
height: 100%;
width: 100%;
}
body{
background: #161925;
height: 100%;
background-repeat: no-repeat;
background-attachment: fixed;
font-family: "moon2reg", "latolight", "calibri", sans-serif;
font-weight: normal;
font-size: 17px;
}
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
height: 100%;
display: block;
}
header {
height: 700px;
max-height: 700px;
width: 100%;
position: relative;
margin: 0 auto;
display: flex;
justify-content:center;
align-items:center;
flex-wrap: wrap;
flex-direction: row;
}
#headerwhitecircle {
display: block;
margin: 0 auto;
text-align: center;
height: 100%;
max-height: 700px;
z-index: -1;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin-left:auto; margin-right:auto;
width: 100%;
}
#headercirclecont {
display: flex;
justify-content: center;
align-items: center;
}
#circleflimage {
margin: 0 auto;
text-align: center;
max-width: 100vw;
max-height: 700px;
}
#headercontent {
width: 100%;
max-width: 600px;
height: 100%;
max-height: 700px;
z-index: 1;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 0 auto;
position: absolute;
display: flex;
flex-wrap: wrap;
flex-direction: row;
align-items:center;
}
#headerparent {
margin: 0 auto;
}
#logo {
width: 100%;
max-width: 600px;
z-index: 1;
}
#headsocials {
width: 100%;
height: 40px;
display: flex;
}
p.svgsocials {
position: relative;
display: inline-block;
width: 100%;
margin: 0 auto;
}
p.svgsocials:after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
h1 {
color: #161925;
margin: 0;
font-size: 80px;
font-weight: 100;
font-family: moon2reg calibri;
}
p {
color: #ffffff;
font-size: 30px;
margin: 5px;
}
.whitetext {
color: #ffffff;
}
.centertext {
text-align: center;
}
#titleTxt {
height: 100%;
max-height: 60px;
}