• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
Locked
0

Responsive design

Explorer ,
May 29, 2018 May 29, 2018

Copy link to clipboard

Copied

Greetings!

I have tried setting 380 and 320 as my breakpoint width for mobile devices, however, when trying to visit the website from my mobile device (5.5in FHD screen), a responsive version of the higher breakpoint shows up. Domain is: https://www.compuro.ml/

I don't have other devices of that screen size to try. All I have is a tablet and a laptop and they'll probably show up the right version.

What do I do?

Views

768

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

correct answers 1 Correct answer

Engaged , May 29, 2018 May 29, 2018

I viewed your website on a Desktop (Mac) and Mobile browser (iPhone 6s) and it appears to respond accordingly on those devices.

As a rule of thumb however, you should set your mobile breakpoint to about 550px with a min width of 320px.

I find a 'mobile' breakpoint width smaller than about 440px does not work on many Android mobile devices. The next breakpoint (usually a tablet breakpoint) up is shown instead.

Keep in mind however that the breakpoint width is not a fixed concept, it's fluid, the br

...

Votes

Translate

Translate
Engaged ,
May 29, 2018 May 29, 2018

Copy link to clipboard

Copied

I viewed your website on a Desktop (Mac) and Mobile browser (iPhone 6s) and it appears to respond accordingly on those devices.

As a rule of thumb however, you should set your mobile breakpoint to about 550px with a min width of 320px.

I find a 'mobile' breakpoint width smaller than about 440px does not work on many Android mobile devices. The next breakpoint (usually a tablet breakpoint) up is shown instead.

Keep in mind however that the breakpoint width is not a fixed concept, it's fluid, the breakpoint width is defined more-so by your page content rather than your intended device.

Think of your mobile breakpoint as a breakpoint for ALL mobile devices, large and small.

Screen Shot 2018-05-30 at 12.52.48 pm.png

Votes

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
community guidelines
Explorer ,
May 30, 2018 May 30, 2018

Copy link to clipboard

Copied

I don't have an iPhone, but, let me just make sure that you got the correct responsive version of the website. The desktop and the tablet versions have 3 collumns while the mobile version has just collumn

Anyways, I tried 550px as the width and got the responsive version that I wanted (the one collumn view) however, it's disrupting the alignment when I'm using my phone. Is there any way to know what's the breakpoint width that my Android device is using, just to get an idea of the correct breakpoint width for mobile devices?

EDIT: A quick Google search helped me. I just checked a found a website: mydevice.io : web devices capabilities  which shows browser width, and for my device, it's showing 412px. Also, it shows iPhone 6s' width as 375px, so, I suppose you didn't get the correct responsive version (as my latest breakpoint width was 320px). So, I guess, I can choose a correct responsive size from this website. I'm keeping it as 420px for now. Thanks for the help!

Votes

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
community guidelines
Engaged ,
May 30, 2018 May 30, 2018

Copy link to clipboard

Copied

If you don't have a mobile device to test your site you should use Google Chrome's Developer Tools to test your mobile viewport instead of resizing your browser width.

The amount of columns on each breakpoint (as per Page Properties) is only for layout reference, they do not effect object object positioning in the browser.

I tested your website on an Android phone and iPhone 6s, the breakpoint above your intended mobile view is being displayed now on both devices, which should not happen if your mobile breakpoint is at 550px.

This is what I see on both devices:

IMG_07DEAB5B11E9-1.jpeg

An alignment disruption may be related to other issues, such as:

  1. elements extending off the page layout area.
  2. incorrect pinning of elements on the page - elements in a fluid mobile breakpoint should be pinned to centre or not pinned at all and should be responsive width or responsive width or height. In your case I would suggest having text in a single column, responsive width instead of two columns.
  3. mobile viewport accidentally set to fixed width instead of fluid width - check by right clicking on your breakpoint bar to confirm your mobile breakpoint is fluid.
  4. other issues or a combination of the above.

With regards to checking mydevice.io and device capabilities, that is a good thing to do. But keep in mind, setting your mobile breakpoint to suit a particular device is not how responsive pages work.

You have to capture a range of viewports for your mobile view, in nearly all cases, a mobile breakpoint of 550px will solve that problem.

The best way to troubleshoot these issues however, is to view the Muse file.

Votes

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
community guidelines
Explorer ,
May 30, 2018 May 30, 2018

Copy link to clipboard

Copied

LATEST

Well, what you're getting is the correct version (however, I have modified it now, but, not yet published).

About developer tools, I had completely forgotten about that because of a long break from website development work.

Regarding the positioning, the center of the 'i' icon was supposed to be horizontally aligned with the center of the two text boxes combined. I had set it so in the 550px breakpoint, but, because my device was just 412px wide, the image got highly scaled down because of its responsive properties and it seemed as if the top was aligned with the top of 'Know about us'. So, if it happened so much till just 412px, I guess, it'll look worse (according to me) on 380px, 360px or 320px, etc. (the breakpoints of the most common devices as I found on mydevice.io).

About setting my breakpoint for a particular device - well, I didn't do so. The webpage showed me the most common breakpoints. I just took the greatest value of them (some model of Lumia and Blackberry had a width of 504px, I guess, but, the share of that device might even be 0% in the market and thus, I ignored thim). So, I thought of it that way and set the breakpoint width at 420px.

So, anyways, because of the modifed design, now, I'm able to use 550px as the breakpoint width without much issues.

Thanks a lot for the help!

Have a great day!

Votes

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