html - CSS: Avoid disappearence of a component when screen is too narrow -
i'm complete newbie @ css. i'm using twenty template , when make screen quite narrow, grey box in center disappears. know it's meant way because it's responsive, how can alter behavior?
i'd adjust width @ disappearance happens. suspect it's somewhere in part of css code:
#banner .inner { -moz-animation: reveal-banner 1s 0.25s ease-in-out; -webkit-animation: reveal-banner 1s 0.25s ease-in-out; -o-animation: reveal-banner 1s 0.25s ease-in-out; -ms-animation: reveal-banner 1s 0.25s ease-in-out; animation: reveal-banner 1s 0.25s ease-in-out; -moz-animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; -o-animation-fill-mode: forwards; -ms-animation-fill-mode: forwards; animation-fill-mode: forwards; background: rgba(20, 20, 20, 0.90); /*color y opacidad de la caja oscura en home */ color: white; display: inline-block; opacity: 0; padding: 3em; text-align: center; }
it doesn't disappear. adds (within "mobile" media query @media screen , (max-width: 736px)
):
#banner .inner { background: none; display: block; padding: 0 1.5em; }
so code above is:
- remove
background
- "expands"
.inner
viewportdisplay:block
- applies
.inner
padding
left , right, text not "touch" edges of viewport.
Comments
Post a Comment