Solved

Issue with Mobile viewport cropping background of website

Posted on 2015-01-16
5
42 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

772 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

10 Experts available now in Live!

Get 1:1 Help Now