minor issue with responsive settings
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)
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.
Hi
I have just checked (a bit late) your request
This is false, by my side I have
there is no dead zone ... Could you please check again ?
CEd
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.
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::
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
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:
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...
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) {
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.
yes I agree with this point, which I thought was what you wanted to point
I have noted this for the next release
CEd
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