?
Solved

Issue with Mobile viewport cropping background of website

Posted on 2015-01-16
5
Medium Priority
?
54 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
[X]
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
  • 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 2000 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: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering 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 describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
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 …
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
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…
Suggested Courses

752 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