minor issue with responsive settings

minor issue with responsive settings was created by Boradan

Posted 8 years 7 months ago #29654
I noticed a minor issue with the dimensions of the responsive mode settings.

The desktop setting has a 'min-width: 1024px'
The first tablet setting has '@media screen and (min-width: 758px) and (max-width: 950px) {'

What this basically means is that the range from 951px to 1023px is not set and is giving a 'dead zone'.
Would there be any chance to get these settings changed?

How it affects things::::

I am currently making a template that uses the built in mobile hamburger menu.
I have one style of menu appearing in the 'Desktop' resolution (a vertical menu fixed to the right of the page), and the burger menu for tablets etc.
I have the desktop menu css in the custom css for desktop resolutions, and all of the tablets/mobile resolutions have the burger menu set.

In desktops over 1024px resolution, the vertical, fixed menu works perfectly.
In tablets and phones below 950px resolution, the burger menu shows and works perfectly.
The issue is the dead zone between 950 and 1024 px - the menu becomes a horizontal inline-block menu, which I definitely DONT want.

The only way I could find to fix this issue was to delete the code from the desktop resolution custom css and put it in a media query:
@media screen and (min-width: 1025px) {

I then had to copy the media query from mobile.css for 758 >> 950px and modify it to:
@media screen and (min-width: 758px) and (max-width: 1024px) {

---

Would it be possible to add the ability to set your own resolutions in the responsive settings page? (or change the tablet resolution to max 1024, and have the desktop mode start at 1025px)
Last Edit:8 years 7 months ago by Boradan
Last edit: 8 years 7 months ago by Boradan.

Please Log in or Create an account to join the conversation.

Replied by ced1870 on topic minor issue with responsive settings

Posted 8 years 7 months ago #29947
Hi
I have just checked (a bit late) your request

What this basically means is that the range from 951px to 1023px is not set and is giving a 'dead zone'.
Would there be any chance to get these settings changed?


This is false, by my side I have

@media screen and (min-width: 1024px) {
@media screen and (min-width: 950px) and (max-width: 1024px) {
@media screen and (min-width: 758px) and (max-width: 950px) {
@media screen and (min-width: 524px) and (max-width: 758px) {
@media screen and (max-width: 524px) {


there is no dead zone ... Could you please check again ?
CEd

Joomlack Webmaster and Developer

by ced1870

Please Log in or Create an account to join the conversation.

Replied by Boradan on topic minor issue with responsive settings

Posted 8 years 7 months ago #29958
I see it now, but I think I know what the issue is:

Why the 1 pixel overlap at the top and bottom of the ranges used?
for example::
Code:
@media screen and (min-width: 950px) and (max-width: 1024px) { body { color: #ffffff;} } @media screen and (min-width: 1024px) { body { color: #000000;} }

If your screen width is 1024px (standard for tablets in landscape mode) then there are 2 rules trying to set the color as both rules cover the 1024 pixel width.
Should the second rule for larger devices not use
Code:
@media screen and (min-width: 1025px) {
to be applied to all screens larger than the tablet landscape resolution?

I actually think this may have been the source of my thinking that there was a 'dead zone'.
I had a vertical, side-screen menu created for screens larger than tablets, but switching to the hamburger-menu style for tablets.
I could not get this to work at all on a landscape tablet as it kept showing the vertical side-menu instead of the hamburger-menu at the 1024px breakpoint.
It switched to the hamburger menu for screens SMALLER than 1024px wide, but not the actual 1024px screen.

The only way I could get round this was to put ALL of the nav code into my custom.css with:
Code:
@media screen and (min-width: 1025px) {

The way your current coding is used, the tablet landscape mode (@media screen and (min-width: 950px) and (max-width: 1024px) {) works perfectly until you actually use a landscape mode with the 1024 pixel width. Once at this point, it gets overwritten by the desktop mode, even though you WANT it to be in tablet landscape mode...
by Boradan

Please Log in or Create an account to join the conversation.

Replied by ced1870 on topic minor issue with responsive settings

Posted 8 years 7 months ago #29960
yes I agree with this point, which I thought was what you wanted to point :)
I have noted this for the next release
CEd

Joomlack Webmaster and Developer

by ced1870

Please Log in or Create an account to join the conversation.

Time to create page: 0.656 seconds

Fast and powerful creation, customizable and responsive.

Read More

We have 538 guests and no members online