Bulma: Tablet size excludes 768x1024

Created on 20 Jul 2018  路  3Comments  路  Source: jgthms/bulma

This is about Bulma.
Is it a bug/feature/question or do you need help? - Bug (?)
If it's a bug, is it a browser bug? - Not a browser bug.

Overview of the problem

This is about the Bulma CSS framework
I'm using Bulma version 0.7.1
My browser is: Chrome

I am sure this issue is not a duplicate? - Reasonably

Description

Bulma sets the minimum size for a tablet to be 769px (eg for .is-size-1-tablet).

The logical resolution of the iPad is (according to my chrome developer tools) 768 x 1024 ; certainly this seems to be the logical resolution of the ipad mini.

Thus is-size-1-tablet and similar do not think the ipad mini is a tablet.

Most helpful comment

Hi, I have a similar question too. iPad has a width of 768px but Bulma count 768px as mobile which is not right as there is no mobile with screen width 768px. Also similarly tablet count starts from 769px which excludes most tablets with 768px screen width.
This is really wired and breaking the design as it is not as I like it to be on different screens. Can anyone clarify on this? I have no idea why Bulma does it.

I don't want to compare anything but personally I think Bootstrap breakpoints are great as it lets us fine-tune the design for different screen sizes with lots of smaller bracket breakpoints which makes sense instead of calling up to 768px screen width as a mobile device.

What do you guys think?

All 3 comments

Yes, in this case "tablet" means "horizontal tablet".

Hi, I have a similar question too. iPad has a width of 768px but Bulma count 768px as mobile which is not right as there is no mobile with screen width 768px. Also similarly tablet count starts from 769px which excludes most tablets with 768px screen width.
This is really wired and breaking the design as it is not as I like it to be on different screens. Can anyone clarify on this? I have no idea why Bulma does it.

I don't want to compare anything but personally I think Bootstrap breakpoints are great as it lets us fine-tune the design for different screen sizes with lots of smaller bracket breakpoints which makes sense instead of calling up to 768px screen width as a mobile device.

What do you guys think?

Hi, I have a similar question too. iPad has a width of 768px but Bulma count 768px as mobile which is not right as there is no mobile with screen width 768px. Also similarly tablet count starts from 769px which excludes most tablets with 768px screen width.
This is really wired and breaking the design as it is not as I like it to be on different screens. Can anyone clarify on this? I have no idea why Bulma does it.

I don't want to compare anything but personally I think Bootstrap breakpoints are great as it lets us fine-tune the design for different screen sizes with lots of smaller bracket breakpoints which makes sense instead of calling up to 768px screen width as a mobile device.

What do you guys think?

I too am perplexed why 769px is set to mobile by default. You can change $tablet: 769px !default in initial-variables.sass. Have to reset $tablet for every project.

@jgthms can you please elaborate on this as to why 769px isn't where tablet starts.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

leofontes picture leofontes  路  3Comments

swthate picture swthate  路  3Comments

Wikiki picture Wikiki  路  3Comments

Qard picture Qard  路  3Comments

choonggg picture choonggg  路  3Comments