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)
b)
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
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
