Fluid Banner for Mobile AND tablet?

  • Hi!
    I managed to get my site the way I want it set up, but I’m still running into an issue. My banner displays properly on a phone, but it still shows normal size on a tablet. Any suggestions on how to make it fluid on both devices?
    Thanks in advance!
    Here is my custom CSS: 

    
.site-title { visibility: hidden; }
.site-description { visibility: hidden; }
.site-header {
max-width: 100%;
position: relative;
height: 500px;
z-index: 4;
margin:0 auto;
}
.site-info a {display: none;}
img {
??max-width: 100%;
??height: auto;
}
@media screen and (max-width: 568px) {
	#page #masthead {background-position: top;
	background-repeat: no-repeat;
	background-size: contain;
	height: 0px !important;
	padding-top: 80px
	}
	.main-navigation .menu-toggle{background-color: initial !important
	}
}

    Mobile Screenshot

    Tablet Screenshot

    • This topic was modified 2 years, 3 months ago by cleasterwood.

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter cleasterwood

    (@cleasterwood)

    No one?

    Hi,

    You can refer to different screen sizes to show the content, for example:

    
@media (min-width:320px)  { /* smartphones */ }
@media (min-width:481px)  { /* portrait e-readers */ }
@media (min-width:641px)  { /* portrait tablets */ }
@media (min-width:961px)  { /* tablet */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

    [Source]


    Link to image: https://gifyu.com/image/ShPrP

    I hope this helps.

    Thread Starter cleasterwood

    (@cleasterwood)

    Thanks, but it isn’t working for me. I think it’s a site-header issue?

    Hi,

    On your code, I edited this line:

    @media screen and (max-width: 568px)

    I added a higher resolution, and this is the behavior (The header keeps its size according to the new screen size):


    Link to image: https://gifyu.com/image/SkMud

    Does that work for you?

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Fluid Banner for Mobile AND tablet?’ is closed to new replies.