Mobile Ansicht: Bereich für Hintergrundbild vergrössern

29.09.2016 08:51

sgrafik
#1

Liebe Foristen
... schon wieder eine Frage:
Im gewählten Design ''Stockolm'' auf der Seite Lauber Communications erscheint in Firefox die ganze Startseite auf Fenstergrösse, die Hauptnavigation ist unten am Fensterrand platziert. In kleineren Formaten (Mobile Anischt wie Tablet, Smartphone ...) und z.T. auch anderen Browsern ist das Startbild nicht mehr ganz ''fensterflächig'' kann ich das ändern und die Bilder in der Mobilen Ansicht zumindest vergrösseren, damit die Köpfe nicht abgeschnitten werden?
Besten Dank für Tipps und Tricks!

LG

Antworten

Beitrag melden

#2

29.09.2016 22:37

Florali
#2

Fl

Florali

Mmmmh, das ist ja komisch. Ich habe auch Stockholm und da passt es auch in den anderen Ansichten.
Mir ist aufgefallen, dass man bei dir auf der mobilen Ansicht das Bild in der vollen Breite sehen kann, indem man nach links wischt. Es schließt also nicht mit dem Text darunter ab. Das ist bei mir nicht so.
Scheinbar wurde da schon was am Design geändert, denn beim Navigieren rollt die Seite ja nach unten, was bei mir nicht so ist. Vielleicht stimmt da irgendwas mit den Einstellungen für das Hintergrundbild nicht?

Ist es denn schon das Responsive Design, dass sich automatisch an das Handy usw. anpasst?

Das sind jetzt aber alles nur ganz laienhafte Vermutungen, denn leider bin ich kein Experte.
LG Florali

Antworten

Beitrag melden

#3

30.09.2016 01:25

az_
#3

az_

...das ist nicht ganz einfach. Googel mal nach "@media-Query". Damit kannst Du über das CSS die mobilen Ansichten abhängig von Device bzw. Fenstergröße des Browsers "aufbohren".

LG, az

Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!

...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de

Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html

Antworten

Beitrag melden

#4

30.09.2016 14:35

sgrafik
#4

sgrafik

@Florali
Es ist das Stockolm als ''OnePager'' � Das sanfte Scrollen habe ich von Jimdo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
 
<script type="text/javascript">
//<![CDATA[
 

       $(function() {
         $('a[href*=#]:not([href=#])').click(function() {
           if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
 
             var target = $(this.hash);
             target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
             if (target.length) {
               $('html,body').animate({
                 scrollTop: target.offset().top
               }, 1000);
               return false;
             }
           }
         });
       });
 
//]]>
</script>
 

@az_
da hab ich mal gegoogelt - und herausgefundent, dass ich nicht nur einen Code-Schnippsel kopieren kann ...
Das ist mir dann doch zu kompliziert.

Trotzdem Danke
LG

Antworten

Beitrag melden

#5

30.09.2016 16:18 (zuletzt bearbeitet: 02.10.2016 11:15)

sgrafik
#5

sgrafik

@az_
... es hat mir keine Ruhe gelassen.
Was meinst du (oder auch andere sind herzlich eingeladen ...) zu meinem Code?
Ich habe den Hintergrund schrittweise eingeschränkt, er ist nun immerhin nicht mehr sooo klein wie vom Originaldesign vorgegeben. Zugegeben bei sehr komischen Fensterverhältnissen geht etwas verloren ... Irgendwelche Tipps?

Herzlichen Dank
LG

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
 
<style type="text/css">
        /*<![CDATA[*/ 
    
@media (min-width:200px)and (orientation: portrait)
 {
    .jtpl-header {
        min-height:  150px !important;
    }
}
    @media (min-width:300px)and (orientation: portrait)
 {
    .jtpl-header {
        min-height:  300px !important;
    }
}
    @media (min-width:300px)and (orientation: landscape)
 {
    .jtpl-header {
        min-height:  200px !important;
    }
}
        @media (min-width:400px)and (orientation: portrait)
 {
    .jtpl-header {
        min-height:  400px !important;
    }
}
    @media (min-width:400px)and (orientation: landscape)
 {
    .jtpl-header {
        min-height:  300px !important;
    }
}
        @media (min-width:500px)and (orientation: portrait)
 {
    .jtpl-header {
        min-height:  550px !important;
    }
}
    @media (min-width:500px)and (orientation: landscape)
 {
    .jtpl-header {
        min-height:  400px !important;
    }
}
    @media (min-width:600px)and (orientation: landscape)
 {
    .jtpl-header {
        min-height:  500px !important;
    }
}
        /*]]>*/ 
</style>
 
 

Antworten

Beitrag melden

#6

30.09.2016 19:56

Florali
#6

Fl

Florali

Vielen Dank, Gregor!
Ich habe jetzt noch mal auf dem Handy diese Seite angesehen und der Hintergrund hat immer noch "Überhang" nach rechts. Komischerweise sieht er auf dem Handy auch ziemlich unscharf aus, während er auf dem PC scharf ist.

Antworten

Beitrag melden