SVG as heading and description of the text content

Monica_MS · Feb 3, 2024

Hi there,I'm new here and have a little (thinking) problem with a project I'm currently planning:

In the picture on the left a), you can see the page at 100% screen width.
On the far left, the orange box is an SVG (as a heading and description of the content) that is displayed here upright.

If you now make the screen width narrower (Fig. b)) and/or you enlarge the screen font, then my SVG should be above the main body, horizontally (above the text) (Fig b) ).

I logically make the transition from state a to b with:

State a
@media screen and (max-width: 480px) { state b }

(The 480p has now been chosen arbitrarily; it should just be a very narrow screen.)

To illustrate this and to recognize the differences in the source text from a to b, I once designed two separate websites.
a)

HTML:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>     
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">     
<meta name="description" content="Testseite001" />     
<meta name="keywords" content="Testseite001" />     
<meta name="language" content="de" />   
<title>Testseite001</title>     
<style>
* { margin:0; padding: 0; box-sizing: border-box; }

html {
  height: 100vh;
}
body {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

tspan {font-size: 1.25rem;}
tspan:last-child {font-size: 0.87rem;}
p {font-size: 1.7rem;}

main {
  flex: 1 0 20em;
  display: flex;
  flex-direction: row;
  overflow: hidden;
}
h1 {
  flex: 0 0 4em;
  min-height: 3.5em;
  display: flex;
  flex-direction: column;
  justify-content: center; align-content:center;
}
h1 svg {
  display: block;
  height: 100%; max-height: 19em;
}
main section {
  flex: 1 1 30em;
  background-color: #ccc;
}
section {padding: 0.8rem;}
</style>
</head>
    <body>     
        <main>
            <h1>
                <svg viewBox="0 0 50 328" preserveAspectRatio="xMidYMid meet"
                    xmlns="http://www.w3.org/2000/svg">
                    <rect x=4 y=4 width=42 height=320 stroke-width="5" stroke="orange" fill="none"/>
                <text x="125" text-anchor="middle" transform="rotate(-90,82,82)">             
                    <tspan x="0" y="25">"Rick and Morty": <tspan style="font-size: 1.05rem;">Staffel 7</tspan></tspan>
                    <tspan x="0" y="38">62. Das erstaunliche Leben des Mr. Kakapopoloch</tspan>
                </text>
                </svg>
            </h1>
<section>
  <p>
                            Fooo
    </p>
</section>
        </main>
    </body>
</html>

b)

HTML:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>     
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">     
<meta name="description" content="Testseite001" />     
<meta name="keywords" content="Testseite001" />     
<meta name="language" content="de" />   
<title>Testseite001</title>     
<style>
* { margin:0; padding: 0; box-sizing: border-box; }

html {
  height: 100vh;
  width:100vw;
}
body {
  display: flex;
  flex-direction: row;
  width: 100vw;
  height: 100vh;
}

tspan {font-size: 1.25rem;}
tspan:nth-child(2) {font-size: 0.9rem;}
p { moz-hyphens: auto;
    -o-hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    word-wrap: break-word;
    font-size: 1.1rem;}
 
@media screen and (min-width: 480px) {
    p {
        font-size: 1.75rem;}
    }
@media screen and (max-width: 380px) {
    p {
        font-size: 0.9rem;}
}

main {
  flex: 1 0 100%;
  display: flex;
  flex-direction: column;
  overflow: scroll;
}
h1 {
  flex: 0 0 7em;
  max-height: 3.5em;
  display: flex;
  flex-direction: row;
  justify-content: center; align-content:center;
}
h1 svg {
  display: block;
  height: 100%;
  width: 100%; max-width: 26em;
}
main section {
  flex: 1 1 30em;
  background-color: #ccc;
}
section {padding: 0.8rem;}

</style>
</head>
    <body>     
        <main>
            <h1>
                <svg viewBox="0 0 328 50" preserveAspectRatio="xMidYMid meet"
                    xmlns="http://www.w3.org/2000/svg">
                    <rect x=4 y=4 width=320 height=42 stroke-width="5" stroke="orange" fill="none"/>
                <text x="125" text-anchor="middle">
                        <tspan x="164" y="25">"Rick and Morty": <tspan style="font-size: 1.05rem;"> Staffel 7</tspan></tspan>
                        <tspan x="164" y="38">62. Das erstaunliche Leben des Mr. Kakapopoloch</tspan>
                </text>
                </svg>
            </h1>
<section>
  <p>
                            Fooo
    </p>
</section>
        </main>
    </body>
</html>

So far so good... I now recognize which values are changing, but I have no idea how I can bring the two together.
What options are there to change these values? And HOW do I do it.

Can you support me with this? I would be very thankful.
Thanks in advance...

Moni

Search

Search

SVG as heading and description of the text content

Monica_MS

New member

Similar threads