Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Mobile version of website does not react

Posted on 2016-11-08
6
Medium Priority
?
155 Views
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?

http://www.aces-project.com/websites/Architect/

thank you
0
Comment
Question by:APD_Toronto
  • 2
  • 2
  • 2
6 Comments
 
LVL 41

Assisted Solution

by:Eoin OSullivan
Eoin OSullivan earned 1000 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
0
 

Author Comment

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

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
0
Threat Trends for MSPs to Watch

See the findings.
Despite its humble beginnings, phishing has come a long way since those first crudely constructed emails. Today, phishing sites can appear and disappear in the length of a coffee break, and it takes more than a little know-how to keep your clients secure.

 
LVL 34

Expert Comment

by:Slick812
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.
0
 

Author Comment

by:APD_Toronto
ID: 41882770
Thanks both, it worked...

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

Accepted Solution

by:
Slick812 earned 1000 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" />
<style>
body {
margin:1px;
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;
font-weight:bold;
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;}
}

</style>
</head>
<body>
<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>

<div id="rightCol">
<div id="press" class="bRad">
<span class="fs60">
FEATURED PRESS
</span><br />
<span class="fs150">
ON THE BOARDS - SAINT ELMO PUBLIC MARKET
</span>

</div>
<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>
</div>
</div>
</div>
</div>

<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
</div>
</body></html>

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
0

Featured Post

Cyber Threats to Small Businesses (Part 1)

This past May, Webroot surveyed more than 600 IT decision-makers at medium-sized companies to see how these small businesses perceived new threats facing their organizations.  Read what Webroot CISO, Gary Hayslip, has to say about the survey in part 1 of this 2-part blog series.

Question has a verified solution.

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

Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
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)

886 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