Display Problems with Horizontal Mobile Display

Hello everyone and thanks for the help in advance. Working on developing a website for my daughter and clumsily plodding through basic css concepts. I have a test page located at https://christyforcongress.com/home/herotesting. Its no work of art, but starting to take some semblance of shape. However, when I display the page on a mobile phone such as a Note, while in horizontal position, the hero image pushes up under the banner. It is obviously caused by a viewport approx. 500 px or less, but not sure how to appropriately handle this. Does this require a separate media query for horizontal display? Any help would be appreciated.

Here is what the top of your home page looks like on an iPad (810x1080 pixels) in portrait orientation:

(I reduced the size of that image and added a black border)

I note the home page is slow to load because it’s 4.9 Mbytes.

Thanks. Haven’t tested on those devices. So what do I do?

Here is a starting point. View this on a desktop monitor and change your browser window’s width and height by dragging sides:

<!DOCTYPE html>
<html>
<head>
<style>
body{
	margin:0;
}
.hero {
    width: 100%;
    height: 100vh;
    background: url(https://christyforcongress.com/images/HeroFlagEdit.jpg);
    background-size: cover;
    background-position: 15% 5%;
}
</style>
</head>
<body>
<div class="hero">
</div>
</body/
</html>
1 Like

That’s because your hero element starts at the top of the viewport so any content you have in that section (like your banner and topnav) is going to be on top of the background image. Your hero image should start in an element that follows the above elements and therefore won’t share the same space.

Your height of 120vh is a magic number that makes no sense. I mentioned this before but why do you want the image to go below the fold on every device?

Also you used the value contain which is resulting in the blank spaces that @Archibald mentions and I also mentioned in the other thread not to do that or you would get white gaps around the image.

Here’s an example (quickly adapted something else) with a hero image under the header and nav and the hero will stretch to the bottom of the viewport from where it starts under the nav.

(Ignore the nav as that was just some old code copied quickly for the demo.)

As mentioned before if you need finer adjustments for small screen then adjust its position slightly in media queries as required. You could add more media queries for height if required. However the current image looks pretty good across all sizes to me.

Here is my attempt to sort things out. It has no media queries but will display satisfactorily on small smartphones.

<!DOCTYPE html>
<html>
<head>
<style>
body{
	margin:0;
}
.container{
	display: flex;
	flex-direction: column;
	width: 100%;
    height: 100vh;
}
.banner {
	display: flex;
	justify-content: space-around;
	align-items: flex-end;
	gap:4px;
	padding: 5px;
	background-color: rgb(145,16,16);
	color: white;
	font: italic bold max(1.2rem, 2vw) sans-serif;
}
.banner > p {
	margin:0;
}
.navbutton {
	box-shadow: inset 3px 3px 3px rgba(255,255,255,0.6), inset -3px -3px 3px rgba(0,0,0,0.6);
	border-radius: 10px;
	padding: 3px 2vw;
	text-align: center;
	font-size: 80%;
}
#donate {
	background-color: #080;
}
#gallery {
	background-color: #666;
}
svg {
	display: block;
	height: 1.2em;
}
.hero {
	flex: 1;
    background: url(https://christyforcongress.com/images/Logo/Logo_Donate.png), url(https://christyforcongress.com/images/HeroFlagEdit.jpg);
    background-size: min(500px, 50vw), cover;
    background-position: 90% 85%, 20% 10%;
	background-repeat: no-repeat, no-repeat;
}
</style>
</head>
<body>
  <div class="container">
    <div class="banner">
      <p>Daring Defender of Freedom</p>
	  <a class="navbutton" id="donate">Donate Now</a>
	  <a class="navbutton" id="gallery">Gallery</a>
	  <a>
	    <svg viewbox="0 0 100 100"><circle cx="50" cy="50" r="50" fill="rgb(24,119,245)"/><path d="M42,100V65H30V50H42V40Q42,18 63,20L73,21V33H66Q58,33 58,40V50H72L70,65H58V100Z" fill="white"/></svg>
	  </a>
	  <a>
	    <svg viewbox="0 0 100 100"><path d="M7,11Q26,30 49,32Q47,7 69,7Q78,7 84,14L97,9Q95,16 88,20L100,17Q98,24 90,27Q90,55 70,73Q40,98 0,79Q20,80 30,70Q17,71 11,56h9Q4,51 4,36L13,39Q0,24 7,11Z" fill="rgb(29,161,242)"/></svg>
	  </a>
    </div>
    <div class="hero">
    </div>
  </div>
  <h1>I Love America. I am Proud of America. I Will Defend America</h1>
</body/
</html>
1 Like

Thanks for the response. I made the adjustments to the vh values which seems to have corrected some of the problems, although the mobile device in landscape mode still is not correct. The other point I had hoped to accomplish would be to float the round donate image link to the lower bottom right of the hero image. I’ll take a look at the code you posted and see if I can understand it enough to implement it. Most updated version is at https://christyforcongress.com

Thanks for the response. You made me realize why I don’t (can’t) do UI work. So if I understand correctly, I really don’t need any type of media query for the hero itself, but the menu and other items are another story. I’m really confused with the two background images, especially since my model requires the round one be an image link preferrably floating to the lower right portion of the hero image. Would you explain the reasoning?

The CSS ‘contain’ keyword makes it very easy to get an image to fully cover an area of a web page, but inevitably some of the the image will usually be cropped. The background-position property takes two values that enable you to control how the image will be cropped. I have chosen values to keep Chisty’s head just to the left of centre even if the browser window is narrow (such as on a smartphone or tablet held in portrait orientation). On a desktop monitor, if you resize your browser by moving right and bottom edges you will see this working.

Whether or not you use a media query, you may like to consider also providing a lower resolution (i.e. smaller pixel dimensions) image to reduce image file download size for smartphone users. If not using a media query this can be done using image-set (but beware of browser compatibility). I’ve not tried this!

I was fully aware that your round image has a hyperlink but decided to see what could be done if it were a second background image with no hyperlink. I doubt many site visitors would be aware that there is a hyperlink and anyway there is a prominent ‘Donate Now’ button at the top. Someone else may like to show you how you can have hyperlink on that image while controlling size and position of the image for a wde range of screen sizes.

Inevitably it is challenging having to cater for anything from small smartphone with only 320 pixels width to a large monitor, say about 8000 pixels wide. It’s important to ensure text remains legible on small smartphones: that includes the text in your round image.

You do not have to use a media query (or queries) for the header and you do not have to use a ‘hamburger’. As a learning exercise for myself to see what could be done, I used CSS Flexbox for the header. This is what it would look like on an iPhone 1 (320 x 480 pixels):

christy 320x480

I am not saying don’t use a media query. It’s your choice! Most people probably would use a media query, perhaps with CSS Grid.

Incidentally, I would remove the distracting background from that hero image :grinning:.

1 Like

Without wishing to tread on @Archibald 's toes and bearing in mind I’m just about to go on holiday for a few weeks I’ve copied your page in to a codepen and made the adjustments I mentioned.

The css in the right panel is your testing css so you can copy all of that as I have changed a number of things (I only changed stuff relevant to the top section of course and didn’t fix anything else). (You will also need to put the image url back to relative as I made them absolute so I could see them.)

The change in the html was that I moved the hero image to a div of its own so that it didn’t sit under the header and nav. I also renamed the div where the hero was to main-header.

It now looks like this which you can copy and replace again.

<header class="main-header">
	<div id="divbanner"> Daring Defender of Freedom&nbsp;&nbsp;<a href="https://secure.winred.com/christy-mclaughlin-for-congress/donate" target="_blank" style="border-radius: 20px 20px 20px 20px; background: #73AD21; padding: 5px 7px 5px 7px; color:  white; font-weight: 900; font-size:  .7em;">Donate Now</a> </div>
	<div class="topnav" id="myTopnav"> <a href="#home" class="active">Home</a> <a href="#meetchristy">Meet Christy</a> <a href="#gallery">Gallery</a> <a href="https://secure.winred.com/christy-mclaughlin-for-congress/donate-today​" target="_blank">Donate</a> <a href="https://www.facebook.com/christy.mclaughlin.102" target="_blank" id="facebook"><i class="fa fa-facebook-square" style="font-size:24px; padding-right:  1px;"></i>Facebook</a> <a href="https://twitter.com/ChristyMarieMc" target="_blank" id="twitter"><i class="fa fa-twitter-square" style="font-size:24px; padding-right:  1px;"></i>Twitter</a> <a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776;</a> </div>
	<div class="hero">
		<div id="divlogo">
			<!--
                                <img src="~/images/Logo/Keep_SW_Florida_Great_Crop2.png" style="max-width:  100%; height:  auto;" />
                -->
			<div id="donateimage" class="donateimage">
				<a href="https://secure.winred.com/christy-mclaughlin-for-congress/donate?exitintent=true" target="_blank" class="donateimage"><img alt="Donate" src="https://christyforcongress.com/images/Logo/Logo_Donate.png" width="100%"></a>
			</div>
			<!--   -->
		</div>
	</div>
</header>

I added a box-shadow to the image so that it stands out a little more because I never even realised you had two images there. I thought it was just one background. I’ve left most of your comments in place so you can follow the html/css.

Note that when you use media queries you don’t need to duplicate all the rules that were previously in that global rule. You only need to code the differences or over-rides. You were including whole blocks of code and in one case all you changed was the font-size.

If you can fork that codepen and keep it for reference I will delete my version.

Once you’ve added the changes then you can fine tune any problems but I tried to keep it simple.

As I said I am away from tomorrow so didn’t want to start anything I couldn’t finish but the suggestions I made are similar to @Archibald 's suggestions anyway so I’m sure someone will be around to help while I’m away.

1 Like

Hi Paul. Thanks so much for the help. This got me a long way. One last question regarding the round link button. Would I be able to allow this button to float farther to the right depending on screen width?

If you mean the Christy donate button then you can move it with the left position. It’s at left:5% at the moment.

#donateimage {
    /* Padding and margins 
	padding: 1em;
	margin-top: 45vh;
	margin-left: auto;
	margin-right: auto;
	width: 150px;
  */
  position:absolute;
  top:50%;
  bottom:8%;
  left:5%;/* adjust to suit*/
}

Change the 5% to something that suits but you don’t want the round image covering the face in that background. I just thought you said you wanted it bottom left so that’s where it sits but you can change it to suit.

Don’t do something silly like left 60% because then the image may break out of the hero altogether. If you wanted the round image at the right you would set left to auto and use right:5% instead.

If its only on very large screens then use a suitable media query but the less media queries you can get away with the better (although sometimes you have no choice depending on design requirements).

Instead of using left: 5%, I switched it to right: 5% with left: auto. Seems to work fine with most devices, however, I did try it with Firefox mobile which really didn’t seem to work. Its workable as it stands. Just surprising how each device and browser seems to be a world of its own.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.