Not responsive on iPhone 6/Tutorial 'Create a responsive grid lay out' 14 June 2017 Contributor Daniel Walter Scott

[martienyland]

A page made with the helpful tips from this tutorial does not show the 'phone view' (breakpoint 768 px). Even the demofiles (index and css in the 'completed folder' shows tablet view on a iPhone 6.

Do I have to change the breakpoint settings??

Thanks in advance!

Martien Yland

[pziecina]

There are hundreds if not thousands of tutorials out there, so how about a link to the tutorial?

If the smallest media-query is for 768px, then you will require another one for smartphones.

[martienyland]

Thank you for your answer! This tutorial ('official Adobe', quite recent, from June this year): Create a responsive grid layout |

It suggests two breakpoints: min. 768 and min 1024 px

[pziecina]

The tutorial is for tablet and desktop only, which means you will have to create your own media-query for smartphones.

Reading the info about the following tutorial, (the one that follows on from your tutorial) -

https://helpx.adobe.com/au/dreamweaver/how-to/responsive-web-design-basics.html

it should contain the info you require in order to learn how to create the mobile view.

[martienyland]

Dear Pziecina,

Thank you; i'll gonna try it.

Best regards,

Martien

[BenPleysier]

martienyland  wrote

It suggests two breakpoints: min. 768 and min 1024 px

That is correct

<768           = mobile

768-1024    = tablet

>1024         = desktop

In other words, the global styles are based on a mobile device and do not need a media query.

[pziecina]

BenPleysier  wrote

martienyland   wrote

It suggests two breakpoints: min. 768 and min 1024 px

That is correct

<768           = mobile

768-1024    = tablet

>1024         = desktop

In other words, the global styles are based on a mobile device and do not need a media query.

A min of 768 px, is saying that the media query is for viewports of 768 or above, not for less than 768. For less than 768 it would be max 767.

The tutorial also says that it is for a responsive page on tablet and desktops, with the following tutorial then explaining how to create a responsive page for mobile, tablet and desktop using 3 media-queries.

Of course if one uses flexbox correctly no media queries are required until the layout breaks at larger viewport sizes.

[BenPleysier]

The tutorial goes about designing for mobile devices before using media queries for larger devices. The following is quoted from the article

3. Finish the responsive design

The web design looks great on mobile devices, now let’s use CSS media queries to ensure your layout automatically adjusts when viewed on tablet and desktop screens. Once you’re done, that’s it — you have successfully created a responsive web page in Dreamweaver.

Flexbox is not part of the tutorial, so I am not sure why you mention this.

[pziecina]

I mention flexbox because done correctly it requires no media-queries in order for a site to be responsive.

[martienyland]

Hello pziecina and ben,

My point is: a page made with the tutorial instructions simply does not show the 'phone view'. Even the demofiles (index and css in the 'completed folder' (you can download these from the tutorial) show tablet view on a iPhone 6.

How can??

[martienyland]

I mean, at least at my iPhone 6...

[BenPleysier]

martienyland  wrote

I mean, at least at my iPhone 6...

iPhone 6 Plus is an HDTV — 1080 x 1920 pixels

[martienyland]

Hi Ben,

I have a 'simple' iPhone 6, no Plus.

I send you the link to the page I made, witch doesn't show 'mobile view' on my iPhone, with the breakpoints min 768 and 1024, exactly as mentioned in the tutorial.. Thank you for your answers anyhow!

Martien

http://www.mwfy.nl/index_nieuw.html

[BenPleysier]

Dit is wat ik zie op mijn 6+, Safari en Chrome

[martienyland]

Dag Ben, even in het Nederlands dan; dat is mijn oude pagina, die werkt wel...

De nieuwe met het probleem dat mobile view  niet getoond wordt is mwfy start

www/mwfy.nl/index_nieuw.html

[BenPleysier · Accepted solution]

Try adding, just after <title>..</title>:

<meta name="viewport" content="width=device-width, initial-scale=1">

[BenPleysier]

I also add

<meta http-equiv="X-UA-Compatible" content="IE=edge">

in case IE gets mixed up

[martienyland]

Super!

This is the soultion.. Thanks al lot!

Bedankt..

[pziecina]

martienyland  wrote

Hello pziecina and ben,

My point is: a page made with the tutorial instructions simply does not show the 'phone view'.

The problem for everyone when building rwd sites, is that there are so many different screen sizes and catering for them all is a problem that one learns to do by experiance.

Phone screens can vary from 300px to 1980px, depending on the manufacturers choices, which can be from a standard display to an hi-dpi display. The same problem applys with tablet, desktop and tv screens.

Tutorials are written in order to give a general overview of principles, and leave the specifics for the 'learner' to master, often by tial and error. Which is why i recommended going on to watch the other tutorials in the series.

[B i r n o u]

I just mention it there (without arguing with your point Paula), but when we use the word of responsive, we often and immediately understand different display adapted to the device screen... but that also undermeaning that the content is strictly equal...

that is, for what I think, completly wrong...

please don't understand that I mean that the content must be different depending on the device.... but the content must be delivered differently depending on the device, but also the bandwith available, the brightness reflecting on the screen, the battery level, the users settings and so on....

so flexbox will only be a part of the process that handle the responsive aspect of the display, and breakpoints will also be somewhere around...

I have tried to flat it down on a series there

Part I - Why Responsive Websites Are Not Just a Simple Step for Website Construction.

Part II - Why Content Strategy should be part of Responsive Web Design ?

Part III - What is the User Expectations for Your Website? That depends on context.

Part IV - Bringing the Content to Design

[pziecina]

Thanks Birnou, and i have read your articles previously.

In order not to 'hijack' this discussion further, and limit all further posts to helping the OP regarding the tutorial mentioned, i would suggest that if we wish to discuss rwd further a new discussion should be started. I would then be willing to discuss all aspects, including flexbox, css grid layouts, srcset/picture, text optimization, detail/summary, in fact most things that users would be interested in, providing such a discussion did not get personal, (as they often tend to do).