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?
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.
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!
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:
An alignment disruption may be related to other issues, such as:
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.
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!