MiniHero responsive desgin

[Legaziofunk]

I want MiniHero (MH) to change it's appearance on smaller screens in the following ways:

For tablets and similar (screen min width: 1024 px)

I want the parallax-effect to still be active.
(This seems to have been solved with iPad-OS (sic!) for Apple devices, since it responds similar like a laptop now.
But I am not sure about Android devices...)

For real small screens (screen max width: 500 px)

I want

• the parallax-effect to still be active.
  
• the hight of the image to adjust (become smaller) (at best proportionally)

I thought, it might work with a relative unit of hight (VH) in MH on WB - but the image keeps its size...

And the frontend.css uses this code, that does not give me a clue what to put there, though I believe the value "cover" should be altered...:

Code: [Select]

.minihero {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
overflow: hidden;
}
Thanx for help...

[hgs]

Hast du mal einen Link für uns?
Damit können wir es einfacher nachvollziehen.
Sollte es so aussehen
https://gyazo.com/9c888887f654e6558b3680a1a39e867a

DeepL:
You got a link for us?
It'll make it easier for us to follow.
If it looks like this...
https://gyazo.com/9c888887f654e6558b3680a1a39e867a

The CSS statement looks like this

Code: [Select]

.parallax {
    background-image: url("../img/parallax.jpg");
    background-image: url("../img/EN_parallax.jpg");
    max-height: 40vw;
    background-attachment: fixed;
    background-position: top left;
    background-repeat: no-repeat;
    background-size: contain;
    height: 30vw;

[Legaziofunk]

Hast du mal einen Link für uns?

Sure: http://www.christianemeusel.de

If it looks like this...
https://gyazo.com/9c888887f654e6558b3680a1a39e867a

Well, pretty much - only from big to small

The CSS statement looks like this

Code: [Select]

.parallax {
    background-image: url("../img/parallax.jpg");
    background-image: url("../img/EN_parallax.jpg");
    max-height: 40vw;
    background-attachment: fixed;
    background-position: top left;
    background-repeat: no-repeat;
    background-size: contain;
    height: 30vw;

The "problem" here is, that MH-code looks like this: your code looks quite different to what MH uses... hence, I am no so sure what to apply...

Also, as seen on the page http://www.christianemeusel.de I am using many MHs on one page.

This raises the question what happens, if some MH-banners do not have the same size?

[hgs]

Dann hoff ich mal, dass die css-Spezalisten dir weiter helfen können.

DeepL:
Then I hope that the css-specialists can help you further.

[Legaziofunk]

Ooops, the MH image do resize when the height of the window is altered (by dragging the edges of the browser window... )

I thought, it would also resize according to the width of the container box...

[hgs]

Ist es das was du erreichen willst?
Ich habe nur die 2 Zeilen (rot) ergänzt
https://gyazo.com/45630895779180ac60218e62b019122a
DeepL
Is that what you want to achieve?
I just added the 2 lines (red)

.minihero {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
   overflow: hidden;
   max-height: 40vw;
   height: 30vw;

[Legaziofunk]

Ist es das was du erreichen willst?
Ich habe nur die 2 Zeilen (rot) ergänzt
https://gyazo.com/45630895779180ac60218e62b019122a
DeepL
Is that what you want to achieve?
I just added the 2 lines (red)

.minihero {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
   overflow: hidden;
   max-height: 40vw;
   height: 30vw;

Ja, im prinzip geht das in die Richtung. (WOW!! Sehr anschaulich dargestellt, Danke!! (wie geht sowas denn...??) )

Nur habe ich nach Übertragung Deines roten Codes nun keine wirklich Änderung bei mir festellen können. Das MH-Bild bleibt gleichhoch...

Ach so: Muss ich dazu die Angabe im WB-Backend bei MH - also die 30vw - dort rausnehmen und leer lassen?

Gleichwohl kämpfe ich derzeit mit dem CSS des MH ziemlich herum.

Wie ist das bei dem Text über dem jeweiligen MH-Bild?

Ich dachte, ich könnte mittels

Code: [Select]

Smaller Screens
@media screen and (max-width: 800px) {

  .minihero-text h1 {
  color: #fff;
  border: 0px solid #fff;
  padding: 10px 0;
  /*font-size: 72px;*/
  font-size: 5vw;
  font-weight: 700;
  letter-spacing: 1px;
  text-shadow: 1px 1px 1px #cc0000;
      font-family: inherit;
  }
}
auf kleineren Bldschirmen

• den Text proportional größer
• die Schattengröße kleiner

darstellen lassen.

Aber das scheint irgendwie keinen Effekt zu haben - zumindest, wenn ich das auf dem iPhone teste.

Auch auf dem Desktop/Laptop-Bildschirm tut sich nix.

Der Text wird proportional immer kleiner und kleiner - da sind dann 3vw einfach zu klein...

[hgs]

Bei jedem Browser solltes du mit der "Sondertaste F12" diese Ansicht bekommen.



hier kann man auch die Anzeigengrößen der verschiedenen Endgeräte testen über diesesn Button



die Ansicht ändert sich dann so



Ich habe die festen Werte unter "Inline" schon zu testzwecken deaktiviert und die Werte unter



sind dann temporär zum testen aktiv.

[dbs]

Im Firefox auf deiner Seite wird die Höhe von MH immer kleiner, wenn der Browser in der Breite schmaler wird.
Also wie gewünscht. Klappt bei dir nicht?

[Legaziofunk]

Im Firefox auf deiner Seite wird die Höhe von MH immer kleiner, wenn der Browser in der Breite schmaler wird.
Also wie gewünscht. Klappt bei dir nicht?

Nein, leider klappt das bei mir nicht...

Der Text aber wird immer kleiner, was ja dann das Problem der sehr geringen und m.E. zu kleinen Schrift führt.

[dbs]

Unterhalb von 660px sollte die Höhe aber kleiner werden.

Für deine Schrift legst du noch extra was an. ZB

Code: [Select]

@media (max-width: 600px) {
  .minihero-text h1 {font-size: 6vw}
}