Question 334767 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – SVG as heading and description of the text content

I’m new here and have a little (thinking) problem with a project I’m currently planning:

My Projekt

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 TO
@media screen and (max-width: 900px) { state b }
}

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

The media query switch from vertical to horizontal now works.
Only my SVG doesn’t take part, as if the values in the ROOT are not accepted, the SVG becomes
quite strange and wrongly placed and neither does it take on the dimensions of the values from the ROOT.

How else can I make the SVG jump from the vertical page to the horizontal headline at a certain screen width.
At least the way I have it, it doesn’t work.

My current source code is:



    

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<html lang="de">   
<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>
        :root {
            --VBb: 50;
            --VBh: 328;
            --width: 42;
            --height: 320;
            --tspanx: 0;
        }

        * {
            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 {
            moz-hyphens: auto;
            -o-hyphens: auto;
            -webkit-hyphens: auto;
            -ms-hyphens: auto;
            hyphens: auto;
            word-wrap: break-word;
            font-size: 1.7rem;
        }

        text {
            transform: rotate(-90, 82, 82);
        }


        main {
            flex: 1 0 20em;
            display: flex;
            flex-direction: row;
            overflow: hidden;
        }

        h1 {
            flex: 0 0 4em;
            max-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;
        }


        @media screen and (max-width: 900px) {
            :root {
                --VBb: 328;
                --VBh: 50;
                --width: 320;
                --height: 42;
                --tspanx: 164;
            }

            html {
                width: 100vw;
            }

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

            tspan:last-child {
                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;
            }

            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;
            }

            text {
                /* Drehung ausschalten: */
                transform: unset;
            }

            main section {
                flex: 1 1 30em;
                background-color: #ccc;
            }

            section {
                padding: 0.8rem;
            }
        }
    </style>   
</head>   
    <body>       
        <main>
            <h1>
                <svg viewBox="0 0 var(--VBb) var(--VBh)" preserveAspectRatio="xMidYMid meet"
                    xmlns="http://www.w3.org/2000/svg">
                    <rect x=4 y=4 width="var(--width)" height="var(--height)" stroke-width="5" stroke="orange" fill="none"/>
                <text x="125" text-anchor="middle">       
                    <tspan x="var(--tspanx)" y="25">"Rick and Morty": <tspan style="font-size: 1.05rem;">Staffel 7</tspan></tspan>
                    <tspan x="var(--tspanx)" y="38">62. Das erstaunliche Leben des Mr. Kakapopoloch</tspan>
                </text>
                </svg>
            </h1>
<section>
  <p>
                            Fooooo
    </p>
</section>
        </main>   
    </body>
</html>

Hopefully someone here can help me
Thanks in advance
MONI

Tags:

2

Answers


  1. 0

    flex-direction for the main that is outside of the media query needs to be column.

    main {
  flex: 1 0 100%;
  display: flex;
  flex-direction: column;
  overflow: scroll;
}
    Login or Signup to reply.
  2. 0

    i hope this helps, I made the changes by the problem that you were facing `

    @media screen and (max-width: 900px) {
  :root {
    --VBb: 328;
    --VBh: 50;
    --width: 320;
    --height: 42;
    --tspanx: 164;
  }

    `

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search