Page may not display well on mobile devices warning :-(

Hi from warm and sunny 18 degrees C York UK :slight_smile:

Just ran this speed test on site and got the below illustrated warning:

Now I know ive entered the world of responsive design so i"m going to have to take baby steps to fix the css @

I just dont know how to fix the following error report:

Size content to viewport
The page content is too wide for the viewport, forcing the user to scroll horizontally. Size the page content to the viewport to provide a better user experience.
The page content is 560 CSS pixels wide, but the viewport is only 411 CSS pixels wide. The following elements fall outside the viewport:
The element falls outside the viewport.
The element

The problem elements look to be the logo image and the Youtube iframe.
You gave the <h1> a fixed height and width.
Change width: 500px to max-width: 500px and width: 100%
Remove the fixed height, what you need is a fixed aspect, to get that give it padding-bottom: 22%ish.
That takes care of the container, now the bg image. Give h1 span background-size: 100%
The iframe will probably need a wrapper with a class to set the height and fix the aspect.

1 Like

Hi @SamA74,

Ive made a bit of mess of following instructions :frowning: Am i right in thinking its this bit of code:
h1, h1 span {

On lines 1076 of the css @ thats causing the logo to rigidly spread across a mobile viewport?



h1, h1 span {
h1 span {
     background-size:100%; /* add this */
1 Like

@SamA74 For anyone who has the patience for this one i salute you! Ok for various reasons I had to deploy a different image replacement technique, I took technique 8 from here

This solved various problems on the desktop version but the mobile… well the old problem of a clipped logo persists via a mobile screen, see below:

The logo is clipped :frowning: Ive battled for the last three hours looking at my iphone etc trying to get that big orange logo to not appear clipped.

Please please pretty please can anyone suggest a fix?


It looks like you did not change all of the css I mentioned above.
You did the width and max-width, but that was all.
You also need to replace the height with padding-bottom and set the background size for the span, as described above.
I had it working yesterday, editing in dev tools, but now it’s not working, due to the text adding to the height. Must be something you changed when you altered the image replacement. I don’t recall how you had the text yesterday, but it did not influence the height of the container.

After that you still have the Youtube iframe to deal with.

Hi Sam, thank you for taking a look at this again. I did apply the code suggested, it fixed the mobile problem but the padding the strapline “York Wedding Photographer” got pushed down massively.

Ive delted the original code you suggested ( V. Sorry My Bad) so currently hitting keyboard on forehead. I wanted to upload the suggested code and illustrate the problem bu i cant now :frowning:

Right now I just need a way for the image to fit properly in mobile view, desktop is perfect.

The trouble with these are, they do not cater for responsive images. That doesn’t matter if the logo is smaller than the small screen, but yours is 500px and you need to get down to about 320px.
The method you used does not work with the code I suggested because of the text content stopping the padding trick that sets the image aspect ratio, replacing the fixed height.
Without a complete re-think of the text replacement method, I can only offer a “quick-dirty” solution. That is to leave in the fixed height :frowning: and add the background properties to the span. Make the background no-repeat and size 100% to allow it to shrink.
It will work, but the fixed height will create a gap between the logo and strapline.
I am no fan of fixed heights in RWD, height should almost always be dictated by content, and almost no content is a set size, images can change from screen to screen and a user may increase font size at will.
With images they should maintain aspect ratio, so as width decreases, height decreases proportionally. Adversely with text, as width decreases (or font size increases), height increases, as lines shorten and wrap to more lines.
So with an image and text, there is a conflict of how height should behave. With just an empty box with a bg image, the padding trick should work to keep aspect. But with text content, the text then dictates the height, so padding will no longer work.
I think the only way to fix the aspect would be to hide the text or take it out of the flow by positioning so it does not affect height.

Thanks mate, really appreciate the help. Your right ive picked a solution that makes responsive difficult. I’m going to knock the image out when it detects a mobile screen size.

Thanks again for all your help and patience :slight_smile:

Hi, David.

Some time last night your layout changed… the background disappeared and your logo container changed. Do you happen to have a saved version from before the change that you can post in a temporary location for a bit? While image replacement techniques are not necessarily needed these days, yours seemed promising enough. I was testing an idea when the code changed. I’ve not been following the current topic so if you are satisfied with your new arrangement and/or if there were other issues, please ignore my request.


Please ignore my request. Thank you.

Proof of concept. Most dimensions are “magic” numbers. This layout uses the full window width, vw units, to set the font size at narrow widths. The height of the “h1” container depends on the line height of the h1 font. Should work if a few pixels of sloppiness (probably absorbed by white space) below the image can be tolerated. Accuracy depends on the user’s font and default font-size. Change the name of the .gif to match yours,

<!doctype html>
<html lang="en">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
Apr 21,2016 11:08 AM
    <style type="text/css">
.outer {
    margin:0 auto;
.header {
h1 {
    outline:1px dashed blue;  /* TEST Outline.  To Be DELETED. */
h1 span {
    background-image:url("images/Davidclick_logo-orange-3.gif");  /* 500x108 */
    opacity:.5;  /* TEST Opacity.  To Be DELETED. */
@media screen and (max-width:32em) {
    h1 {font-size:10.8125vw}

<div class="outer">
    <div class="header">


Thanks Ron Pat for your help but I have in my world fixed it by barbarically knocking out the logo when viewed on a mobile. It works, i just got exhausted trying to figure it out!

You are not there yet. Between 1000 and 770 the logo is cropping because the 50% header gets down to 500px at 1000px.
Fix that with no-repeat and background-size:100% on the logo span.
Also at 320px the title is overflowing the screen a bit, “davidclick.con”.
And there is still the Youtube once you get the logo right.

1 Like

@SamA74 @ronpat The evil case of trying to get a logo to fit the mobile version persists… :frowning:

Just for my own sanity if anyone has the patience to explain why my latest effort of adding a smaller image had no effect and the logo for is still cropped on my iphone S I’d be externally gratefull, here is the offending code:

h1.logo { width: 100%; max-width: 300px; height: 65px; position: relative; } h1.logo span { background: url("/images/Davidclick_logo-giffed-mobile-2.gif"); background-repeat:no-repeat; background-size:100% }

Its on line 79 onwards in the mobile section of the css, I really thought if i added a smaller image 0f 300 x 65 the clipping appearance of the logo in mobile would disappear but I’m clearly not getting something @

This does not want to be in a media query, no-repeat and size:100% should be global properties for the logo, as it starts to crop at 1000px.
What you set in the query there is getting overridden by the subsequent rules at line 1072.

1 Like

@SamA74 Wow that fixed it thankyou. Yes I see what you mena about applying it globally, that bit i understand, thank you.

But why back-repeat:no-repeat and background-size:100% fixed it I just cant figure but thank you so much!

There was no problem with the screen 1000px or bigger, but below 1000 it crops. A parent to the logo is set to 50% width, the logo is 500px, 50% of 1000 is 500. So if the screen is less than 1000, 50% won’t contain 500px, so it crops. 100% width makes the image shrink to fit the 50% however small that is. The no-repeat stops you seeing a copy below as it shrinks in width but keeping the same height.


Great answer thank you!

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