WebsiteBaker Support (2.10.x) > Modules

MiniHero responsive desgin

<< < (2/3) > >>

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:

--- Quote from: hgs on January 03, 2020, 06:30:36 PM ---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;

--- End quote ---

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: ---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;
  }
}
--- End code ---

auf kleineren Bldschirmen

* den Text proportional größer
* die Schattengröße kleinerdarstellen 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:

--- Quote from: dbs on January 07, 2020, 11:28:27 AM ---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?

--- End quote ---

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.

Navigation

[0] Message Index

[#] Next page

[*] Previous page