Solved

Mobile version of website does not react

Posted on 2016-11-08
6
127 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
[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
  • 2
6 Comments
 
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
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 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
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

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

Resolve Critical IT Incidents Fast

If your data, services or processes become compromised, your organization can suffer damage in just minutes and how fast you communicate during a major IT incident is everything. Learn how to immediately identify incidents & best practices to resolve them quickly and effectively.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
html5 1 45
Disabling a Faux Submit Button 4 41
Firefox CSS Help. 1 12
Allow the whole div to submit form not just button 2 14
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
Ransomware is a growing menace to anyone using a computer or mobile device. Here are answers to some common questions about this vicious new form of malware.
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…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

751 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