Solved

Issue with Mobile viewport cropping background of website

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
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 Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

930 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

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now