Solved

Mobile version of website does not react

Posted on 2016-11-08
6
56 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 39

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
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 39

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
Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

 
LVL 33

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 33

Accepted Solution

by:
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" />
<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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

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 discusses four methods for overlaying images in a container on a web page
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 code hide show and toggles. 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…

744 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

11 Experts available now in Live!

Get 1:1 Help Now