Solved

Issue with Mobile viewport cropping background of website

Posted on 2015-01-16
5
49 Views
Last Modified: 2016-05-12
Hi Experts,

I'm hoping you can help me with what I believe is some sort of strange mobile viewport issue. My client wants to show his website at full resolution to viewers instead of using the responsive mode on his theme. I've disabled the responsive mode int he theme options and it show the large resolution version of the site but the page loads zoomed in (not the main problem). When the user zooms out the background color of the main site containers are cropped when viewing the full site in mobile resolution.

Check out the link below on a mobile device and you should see what I'm talking about. You can also resize your browser window and the same effect occurs. I have implemented a workaround involving setting the width on the div containers to 1200px when the screen resolution of the viewing device is below 768px wide.

The site in question is at crypticindustries.com/revised

Please let me know what I'm doing wrong or what I need to do to make sure the div BGs do not get cropped by the viewport window wherever the window border happens to be when the page loads. I hope this make sense and look forward to your replies.

Thanks!

Merchantweb
0
Comment
Question by:merchantweb
  • 2
  • 2
5 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 40555299
Perhaps I don't understand the problem because I am not seeing anything that could be called cropping when I view at various viewport sizes using Firefox 35.0. perhaps you could post a screenshot that illustrates the problem.

The page is not appropriate for viewing on mobile if your client is not prepared to to used responsive design,  The technology cannot overcome rigid uncompromising design that insists on putting 5 gallons into a 2 gallon container.

Cd&
0
 
LVL 1

Author Comment

by:merchantweb
ID: 40555740
Hi Cd,

I agree with you 100%. There are some devices that it will just not be user friendly for and the client may be looking at it from a narrow point of view (maybe only on his device). Until I can convince him, I'll need to get this working to move forward with the project. I created a screencast to illustrate the issue and I also removed my css workaround so the problem can be easily seen on high res displays. Here is the video: http://youtu.be/XZIiraMzxyI

Thanks!
0
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 500 total points
ID: 40556351
Actually it is behaving the way I would expect a static design page to render when it is being put into an environment where is cannot react to changing dimensions.  It does not snap back because it is not dynamic.  You might be able to fix it using the resize event to fire a script that tries to restore to a default state, but I'm not sure how reliable it will be unless the CSS is very flexible and with 12 stylesheet in one page It looks like it could be pretty dicey to make changes without breaking something else.

Basically the page forces the rendering engine of the browser to "guess" what is correct, and it does not always get it right.

Cd&
0
 
LVL 1

Author Comment

by:merchantweb
ID: 40557087
Hi Cd,

I'm on my way to getting a nice solution. I can change it up to be more or less responsive, or mobile friendly to the user, using different viewport settings.

Thanks for the help!
0

Featured Post

Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Find out what you should include to make the best professional email signature for your organization.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

809 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question