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.
Ive made a bit of mess of following instructions Am i right in thinking its this bit of code:
h1, h1 span {
height:108px;
width:500px;
position:relative;
}
@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 https://css-tricks.com/css-image-replacement/
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:
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.
But:
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
Right now I just need a way for the davidclick.com 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 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.
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.
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,
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.
@SamA74@ronpat The evil case of trying to get a logo to fit the mobile version persists…
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 www.davidclick.com is still cropped on my iphone S I’d be externally gratefull, here is the offending code:
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 @ http://www.davidclick.com/styles/fluid-grid.css
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.
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.
Am i right in thinking its this bit of code:
