Highlighted

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

Community Beginner ,
Nov 25, 2017

Copy link to clipboard

Copied

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

Adobe Community Professional
Correct answer by BenPleysier | Adobe Community Professional

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

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

Views

907

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

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

Community Beginner ,
Nov 25, 2017

Copy link to clipboard

Copied

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

Adobe Community Professional
Correct answer by BenPleysier | Adobe Community Professional

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

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

Views

908

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Nov 25, 2017 0
LEGEND ,
Nov 25, 2017

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 25, 2017 0
Community Beginner ,
Nov 25, 2017

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 25, 2017 0
LEGEND ,
Nov 25, 2017

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 25, 2017 0
Community Beginner ,
Nov 25, 2017

Copy link to clipboard

Copied

Dear Pziecina,

Thank you; i'll gonna try it.

Best regards,

Martien

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 25, 2017 0
Adobe Community Professional ,
Nov 25, 2017

Copy link to clipboard

Copied

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.


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 25, 2017 0
LEGEND ,
Nov 26, 2017

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 26, 2017 0
Adobe Community Professional ,
Nov 26, 2017

Copy link to clipboard

Copied

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.


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 26, 2017 0
LEGEND ,
Nov 26, 2017

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 26, 2017 0
Community Beginner ,
Nov 26, 2017

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 26, 2017 0
Community Beginner ,
Nov 26, 2017

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 26, 2017 0
Adobe Community Professional ,
Nov 26, 2017

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 26, 2017 0
LEGEND ,
Nov 26, 2017

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 26, 2017 0
Adobe Community Professional ,
Nov 26, 2017

Copy link to clipboard

Copied

martienyland  wrote

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

iPhone 6 Plus is an HDTV — 1080 x 1920 pixels


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 26, 2017 0
Community Beginner ,
Nov 26, 2017

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 26, 2017 0
LEGEND ,
Nov 26, 2017

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 26, 2017 0
Adobe Community Professional ,
Nov 26, 2017

Copy link to clipboard

Copied

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


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 26, 2017 0
Community Beginner ,
Nov 26, 2017

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 26, 2017 0
Adobe Community Professional ,
Nov 26, 2017

Copy link to clipboard

Copied

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

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


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 26, 2017 1
Adobe Community Professional ,
Nov 26, 2017

Copy link to clipboard

Copied

I also add

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

in case IE gets mixed up


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 26, 2017 1
Community Beginner ,
Nov 26, 2017

Copy link to clipboard

Copied

Super!

This is the soultion.. Thanks al lot!

Bedankt..

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 26, 2017 0