Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

Issue with Mobile viewport cropping background of website

Posted on 2015-01-16
5
50 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

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
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…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

860 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