• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 173
  • Last Modified:

Mobile version of website does not react

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
APD Toronto
APD Toronto
  • 2
  • 2
  • 2
2 Solutions
Eoin OSullivanConsultantCommented:
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
APD TorontoAuthor Commented:
Where can I find sizes of general devices? By general I mean. dont want to specify for every device.
Eoin OSullivanConsultantCommented:
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
What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

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.
APD TorontoAuthor Commented:
Thanks both, it worked...

However, why was min-device-width also required, and how would you have structured my css instead.
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

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.

  • 2
  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now