Mobile version of website does not react

Posted on 2016-11-08
Last Modified: 2016-11-11
Hi Experts,

I made the following sample webpage for my portfolio, with 2 media breakponts and mobile-first

When I squeeze my browser I get the mobile version, then when I expand it I get the iPad version, and finally the desktop.

I have iPone 6+ and I have another SKY phone, which is very small, but both show the tablet version, not the mobile. What am I doing wrong?

thank you
Question by:APD_Toronto
  • 2
  • 2
  • 2
LVL 40

Assisted Solution

by:Eoin OSullivan
Eoin OSullivan earned 250 total points
ID: 41880049
your @media statements are not very well suited to mobile devices .. simple height and width are not really adequate for handling mobile phones and tablets specifically

You should really look at adding orientation, min-device-width, device-width statements to your @media statement e.g.
@media only screen 
    and (min-device-width : 414px) 
    and (max-device-width : 736px)
    and (device-width : 414px)
    and (device-height : 736px)
    and (orientation : portrait) 

Open in new window

In addition you probably should consider changing the @media statements as you have currently setup a base style .. then apply additional styles and overrides when screens are greater than 768px .. and then a further set of overrides which apply when greater than 1024px

The problem is that because you set no min-device-widths on either of the 2 @media statements all the css styles in the @media 768px wide will apply when wider than 1024px unless overrides are also set at the next level

At the very least you should add the following to the 2 media queries after the min-width values
and (min-device-width : 768px)

Open in new window

and (min-device-width : 1024px)

Open in new window

Your comment on line 77 is incorrect
/*Remove properties and elements only for mobile*/
What that @media statement is doing is adding or overriding pre-existing styles for devices BIGGER than 768px and not removing properties on smaller screens
In effect the statement on line 1 is wrong too
/* This is the mobile stylesheet */
The first 76 lines are the styles that apply to ALL screens by default .. the 2 @media statements  then override the master styles as set out in lines 1-76

Author Comment

ID: 41880687
Where can I find sizes of general devices? By general I mean. dont want to specify for every device.
LVL 40

Expert Comment

by:Eoin OSullivan
ID: 41880755
No such thing as a general device. Depending on your website target market it could largely be users on smartphones or users on desktops with 28inch hi res screens and everything in between
How Do You Stack Up Against Your Peers?

With today’s modern enterprise so dependent on digital infrastructures, the impact of major incidents has increased dramatically. Grab the report now to gain insight into how your organization ranks against your peers and learn best-in-class strategies to resolve incidents.

LVL 34

Expert Comment

ID: 41881483
greetings APD_Toronto, , In many mobil browsers, in order to display "Older" non-mobil web pages, the browser will "Resize" and "Offset" the web page to TRY and have an older web page be usable in a modern mobil view. SO it is usually always necessary to have a meta "viewport" tag with at least setting the initial scale to One, here is the meta tag I almost always use-
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />

Open in new window

this will in most browsers, display the page without "Resize" and "Offset" so your CSS for responsive changes will be effective.

AS to your request for - "Where can I find sizes of general devices? " - In 2016, there are thousands of devices with many many different screen resolutions, so the best you can do IF you use generalized "One Size Fits All" is some like you use as 768px or 1024px, , BUT for me and other web page developers, it is best to have the responsive width breakpoints at screen resolutions that are Specific to the page or "Site Template" that change the page, NOT for a device, but for when the page structure "Requires" a change, in other words, you change from a TWO COLUMN structure, to a One column structure at a specific WIDTH, only when you see that the Two Columns are "Too Small" to support the contents that are shown in that Page. Then you can do MORE changes, some Big structure changes like columns, and then smaller changes like elements in a "Row" as the width is different for a device, OR they go from portrait to landscape.

And as eoinosullivan has already mentioned, you have NOT used the CSS "media only screen" in a way that is effective-
     @media only screen and (min-width: 1024px){
the placement and contents of these CSS "media" width breakpoints make a difference in how the page looks.

Author Comment

ID: 41882770
Thanks both, it worked...

However, why was min-device-width also required, and how would you have structured my css instead.
LVL 34

Accepted Solution

Slick812 earned 250 total points
ID: 41884024
I had some time, so I looked at your page code for the Architects Inc.  Page. .  I was thinking I could show you some factors to change your CSS and page code for a better responsive page. BUT, I did NOT understand any of your HTML structure for the basic and specific groupings you have for most any part of the PAGE. The menu of-
   <div id="divMenu">
seems in a very BAD page position, as It blocks the view of the image?
In my opinion, you use awkward and ineffective structure groupings <div> for the Sections (columns). Also you have no Site Title for "Architects Inc." ? ?

So I did not use any of your HTML CSS code, but build a similar page with my own html and css. I looked at this in a couple of phones, and chromebook, and a tablet, and it seems to display as I expected it to for that device,
BUT, you really do not have any "REAL" content n this except or the <img> as architecture.jpg
So I can not really tell if my width break points would be in order?
Here is my code -
<!DOCTYPE html>
<html><head><title>Architects Inc.</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
body {
background: #def;

#menu {
position: fixed;
text-align: center;
font-size: 12px;
color: #090;
top: 0.24em;
right: -1px;
background: #fc0;
padding: 5px;
border-radius: 10px;
z-index: 2;
cursor: pointer;

.tx3D {
min-width: 390px;
font: 150% helvetica, sans-serif;
letter-spacing: 1px;
margin: 9px;
text-align: center;
color: #DCC0ba;
text-shadow: /*0 1px 0 #999999, 0 2px 0 #888888,*/
  0 2px 0 #777777, 0 4px 0 #666666,
  0 3px 0 #555555, 0 6px 0 #444444,
  0 4px 0 #333333, 0 8px 7px rgba(0, 0, 0, 0.4),
  0 5px 9px rgba(0, 0, 0, 0.2);

#PageResp {
max-width: 1276px;
min-width: 390px;
margin: 0 auto;
background: #fff;
padding: 0.8em 0;

.bRad {border-radius: 12px;}

#mobilTitle {
display: none;

.mobile-only {
display: none;

#leftCol {
position: relative;
display: inline-block;
width: 59%;
text-align: center;
vertical-align: text-top;

#archImage {
width: 98%;

#zachText {
position: absolute;
left: 3%;
top: 7px;

#rightCol {
display: inline-block;
vertical-align: text-top;
width: 40%;

#press {
background-color: #061A02;
color: white;
text-align: center;
padding: 4.8em 5px;
margin-bottom: 1em;

.fs60 {
font-size: 60%;

.fs150 {
font-size: 150%;

#intro {
min-height: 200px;
text-align: left;
background: #000;
color: #fff;

#introCon {
padding: 2em;

#tilde {
border: 1px solid white;
border-radius: 50%;
width: 40px;
height: 40px;
line-height: 35px;
font-weight: bold;
text-align: center;
font-size: 230%;
margin-bottom: 8px;

#footer {
width: 94%;
border: 1px solid #07a;
margin: 8px auto;
padding: 8px;
background: #fff;

@media screen and (max-width: 880px){
#leftCol {width: 99%;}
#archImage {width: 78%;}
#zachText {left:15%;}
#rightCol {width: 99%; text-align: center;}
#press, #intro {width:48%; display: inline-block; vertical-align: text-top;}

@media screen and (max-width: 610px){
#archImage {width: 98%;}
#zachText {left:3%;}
#press, #intro {width:98%;}
#menu {top: 4em;}

<div id="menu">M<br />E<br />N<br />U</div>
<div class="tx3D">Architects Inc.</div>
<div id="PageResp" class="bRad">

<div id="leftCol">
<img id="archImage" src="images/architecture.jpg" class="bRad" alt="Latest Project"/>
<div id="zachText">Zach Toffer Theatre</div>

<div id="rightCol">
<div id="press" class="bRad">
<span class="fs60">
</span><br />
<span class="fs150">

<div id="intro" class="bRad">
<div id="introCon">
<div id="tilde">~</div>
<div id="intro_text" class="project_name">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi vel voluptates laborum, Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi vel voluptates laborum, eius dolore id est sequi dicta ea possimus, odio quisquam iure, assumenda facere iusto delectus quis excepturi ratione, odio quisquam iure, assumenda facere iusto delectus quis excepturi ratione!

<div id="footer" class="bRad">
<h3 style="text-align: center; color: #b2b; margin: 3px 0;">FOOTER</h3>
Lorem ipsum dolor sit amet, consectetur adipisicing elit<br />Lorem ipsum dolor sit amet, consectetur adipisicing elit

Open in new window

I used the  -
         media screen and (max-width:
because I m used to dealing with that, I did not use any device-width for the media, because It did not seem like this page would need any of that.

This is my first width breakpoint -
       @media screen and (max-width: 880px){
based simply on the contents in the -
     <div id="press" class="bRad">
where the two column seemed to be inadequate for the text "ON THE BOARDS - SAINT ELMO PUBLIC MARKET"

I hope this my can help you, but it takes time and effort to learn the responsive factors for width changes

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

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

By this time the large percentage of day-to-day transactions have shifted to mobile banking; here are some overriding areas QAs must investigate while testing mobile banking apps.  
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
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 …
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)

807 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