- This topic has 15 replies, 4 voices, and was last updated 4 years, 10 months ago by
.
-
Posts
-
The options to specify padding and margin values for tablets and mobiles when using containers appears to only affect the positioning when the device is either vertical or horizontal.
For example, if a margin of 80px is specified to a container for a tablet (iPad), the desired spacing only works when the device is horizontal. The settings are ignored when the device is titled vertically.
Equally, if there are padding values for a mobile, the spacing only works if the device is vertical. As soon as it’s titled to horizontally, the configurations are no longer applied.
What options are there to resolve these without resorting to custom CSS?
Customer Support
Hi there,
What options are there to resolve these without resorting to custom CSS?
Custom CSS is the only solution I’m aware of.
There is no way for a browser to detect whether a screen is portrait or landscape as it’s all based on the screen width which is px number.
Thanks Leo.
Is it possible for the GeneratePress theme to introduce these? It would minimize the need for custom media queries. It would also benefit the community as a whole.
In the meanwhile, what are the recommended media queries and CSS selectors that need to be customized?
Is it possible for the GeneratePress theme to introduce these?
Not really, as it’s a browser theme as far as I understand.
Browsers need to be able to determine whether a landscape or portrait screen is used before the theme can set something up for that.
what are the recommended media queries and CSS selectors that need to be customized?
This question a little vague. It completely depends on what element you are having issues with.
Keep in mind that portrait and landscape mode is pretty difficult to deal with – especially for tablets as they all have different widths.
Hi Leo,
Browsers need to be able to determine whether a landscape or portrait screen is used before the theme can set something up for that.isn’t clear. Browsers parse the media the relevant media queries based on the dimensions of the device so it isn’t immediately obvious why it cannot be included in GeneratePress.The question as the recommended media queries and CSS selectors is a a whole. The assumption at this stage is that the media queries can be applied to the parent container.
Hmm are you referring to these breakpoints here?
https://docs.generatepress.com/article/responsive-display/#responsive-breakpointsIt’s used throughout the theme.
Hi Leo,
Yes although these don’t appear to produce the desired results when a device is either vertical or horizontal.
It depends on what device you are referring to and what screen width (in px) it has when in landscape or portrait mode.
Do you have a specific question or example you can link me to?
The question is specific to tablets and mobile devices when titled as in the example earlier in the thread.
Customer Support
Hi there,
There is no ‘concrete’ way of detecting you’re viewing a page on a mobile/tablet device using CSS media queries anymore, let alone what orientation the device is. As more and more larger devices are released with higher res screens it would mean what worked yesterday would no longer work today or in the future. The last thing we want to do is add ‘subjective’ CSS – not all users will want it and theirs no future proof method for this.
For the majority of cases the current media queries work correctly and conform to standard web design practices.
Thanks David.
The standard supports orientation media queries – https://www.w3.org/TR/css3-mediaqueries/#orientation.
The common breakpoints typically are as follows. While these will change over time, Stat Counter provides an overview of these and their use – https://gs.statcounter.com/screen-resolution-stats/. This helps in the way of an objective view.
320px — 480px: Mobile devices
481px — 768px: iPads, Tablets
769px — 1024px: Small screens, laptops
1025px — 1200px: Desktops, large screens
1201px and more — Extra large screens, TVLead Developer
The issue with having this many media queries is the number of options you need to introduce. For every breakpoint, you need to duplicate the set of options that can be changed for them. Having three media queries as we do now (desktop, tablet, and mobile) results in a lot of options, but they’re 100% necessary. Duplicating these lists of options even further would be a shame when it comes to code simplicity and performance. It would definitely need to be an often-requested/absolutely necessary feature for me to feel comfortable doing that.
Hi Tom,
We are all for simplicity and performance and it’s a couple of the many reason we <3 GeneratePress.
The suggestion is to minimize hand rolling the styles and adopt an approach that can be applied holistically. This would allow for scale, extensibility, etc. This also gets away from subtractive CSS approaches which tend to lead to code bloat.
An option would be to adopt a CSS UI framework that offers modular components out of the box (and a wider array of support for devices for example. It also abstracts the implementation).
Examples include Get Skeleton, Spectre, Milligram. For instance, we have imported (pun intended) libraries such as Bulma and PureCSS that not only extend the options available (and hence the question at the start of the post to step away from custom CSS which become a maintainability challenge as you mention) but also greatly simplify development.
It would be great to consider it as part of the roadmap.
Please note the Orientation CSS property does not detect the orientation of the device. It simply determines whether the viewport is Landscape ( ie. its width is greater than its height ) or Portrait ( ie. its height is greater than its width ).
This can introduce more complications and inconsistencies. For example:
I work on a 5k 27″ screen. I sometimes use a 50/50 split screen in development or for general reading, which means my browser viewport becomes portrait. Do i want a portrait styling applied ? Probably not.
Another example, i work with iOS applications that use the devices UI for select inputs, when open these UIs occupy a large chunk of the screen, now my portrait orientated device has a landscape viewport and landscape styling.As i said there is no concrete way of determining a devices orientation with CSS.
Sorry for not looping back sooner David.
Although there isn’t a concrete method, there are options between device and screen orientation. Examples include the screen and window orientation APIs.
Assuming it isn’t a feature that is being looked at, it would be valuable to include a reference on it being a customization. Rightly or wrongly, users (we have had several now) assumed that template would support the screen and device orientations.
- You must be logged in to reply to this topic.
