Wie man Hintergrund (Farbe, nicht img) ansprechend macht?

Ich baue responsive Seite. Ein Abschnitt hat ein Problem. Wenn ich den Bildschirm kleiner mache, geht die Hintergrundfarbe aus (unten auf ein paar mm). Ich habe überprüft - wenn ich keinen Hintergrund habe - habe ich kein Problem. Wie man es repariert? Warum passiert das?Wie man Hintergrund (Farbe, nicht img) ansprechend macht?

.bottomright{ 
 
\t grid-area: bottomright; 
 
\t display: flex; 
 
\t justify-content: center; \t 
 
\t align-items: center; 
 
\t flex-direction: column; 
 
\t background-color: #D3D3D3; 
 
\t position: relative; \t 
 
} 
 
.bottomright:hover{ \t 
 
\t z-index: 1; 
 
    box-shadow: 0px -2px 24px 2px rgba(0,0,0,0.2); 
 
\t transform: scale(1.02); 
 
} 
 
.bottomright h4{ 
 
\t color: #808080; \t 
 
\t flex: 0 0 auto; 
 
\t align-self: flex-start; 
 
\t position: absolute; 
 
\t top:2rem; 
 
\t left: 2rem; 
 
} 
 
.bottomright img{ 
 
\t flex: 0 1 auto; 
 
\t align-self:center; \t 
 
\t max-width: 80%; 
 
}

<div class="bottomright"> 
 
       <h4>SHCEDULE A MEETING AT 
 
        <p>IBC 2016</h4> 
 
       <img src="comigo/other/img-event-IBC.jpg"> 
 
      </div>

Quelle

2017-09-12 Natalia

tun Sie ein Meta-Tag in Ihrem Header? mlegg

was meinst du "Wenn ich Bildschirm kleiner mache" ? Wenn Sie Skalierung in Ihrem Browser verwenden - der Browser zeigt Ihnen einige Fehler beim Rendern im Maßstabsmodus, aber nicht das wahre Problem mit Ihrer Seite. Denken Sie daran - in jedem Browser nur mit 100% Skalierung zu überprüfen. –

Bitte geben Sie eine URL für ein Bild an. – Animay

Alles, was Sie anspricht, setzen Sie in einem div wollen und dann haben Sie Medien Bildschirm propperty die für jedes Anzeigegerät in Ihrem CSS einzustellen.

So:

@media screen and (min-width: 1024px){ 
    .responsive{ 
     ... 
    } 
} 
@media screen and (min-width: 980px) and (max-width: 1024px){ 
    .responsive{ 
     ... 
    } 
} 

/* Tablet */ 
@media screen and (min-width: 760px) and (max-width: 980px){ 
    .responsive{ 
     ... 
    } 
} 

/* Mobile HD */ 
@media screen and (min-width: 350px) and (max-width: 760px){ 
    .responsive{ 
     ... 
    } 
} 

/* Mobile LD */ 
@media screen and (max-width: 350px){ 
    .responsive{ 
     ... 
    } 
}

Quelle

2017-09-12 15:29:27

Sie sind ansprechbar Webseite erwähnt, aber ich kann keine Medienanfragen in Ihrem Code finden. Sie müssen Medienabfragen verwenden, nur dann erhalten Sie eine responsive Webseite.

sollte es dieses mag

/* for Mobile */ 
@media only screen(min-width:630px) 
    { ........} 

/*for desktop */ 
@midea only screen (min-width:1224px) 
{ .......}

Quelle

2017-09-12 15:59:50

Wie man Hintergrund (Farbe, nicht img) ansprechend macht?

Antwort

Verwandte Themen