On my site http://ilala.org the navigation bar is horizontal (correct) in Chrome and Firefox, but is showing as vertical on Microsoft Edge. I believe that i have set everything as fall back first.
Angie Mulligan
Registered User
219 posts
Inger
Senior Advisor
14,647 posts
Online Now
Yeah, I can confirm the wrong alignment in Edge, and for good measure, it's even worse in IE11. Well, it's Microsoft... 
On a more serious note, we need to see that source file to have a chance of hunting down whatever it is. And BTW, were you not working on a new menu? I seem to remember discussing it not very long ago.
On a more serious note, we need to see that source file to have a chance of hunting down whatever it is. And BTW, were you not working on a new menu? I seem to remember discussing it not very long ago.
Ha en riktig god dag!
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Angie Mulligan
Registered User
219 posts
This is the new menu that wanted to stick with. I just always use chrome or firefox, so I didn't realize the issue
https://www.dropbox.com/s/v55y63yfmffmm … 2.rsd?dl=0
https://www.dropbox.com/s/v55y63yfmffmm … 2.rsd?dl=0
Bob Visser
COO
827 posts
Older versions of Edge (and IE11) don't support 'CSS Grid' — depending on what version you used this might cause anything that has 'grid' styles to display differently.
The way this works is that you create a straightforward layout first (fall back first), and then enhance the layout using CSS Grid (together with Feature Queries, which is a simple Toggle setting under the Design For icon in SD).
The general concept of this I explained in this Medium article: Layout Design with CSS Grid & Feature Queries: A real world workflow that works.
The way this works is that you create a straightforward layout first (fall back first), and then enhance the layout using CSS Grid (together with Feature Queries, which is a simple Toggle setting under the Design For icon in SD).
The general concept of this I explained in this Medium article: Layout Design with CSS Grid & Feature Queries: A real world workflow that works.
The future of web layout has arrived and it's called CSS Grid. CoffeeCup helps you to get ready with a free guide, the Grid Builder app plus cool demos & themes.
Angie Mulligan
Registered User
219 posts
This is where I’m confused. I did fall back first and hadn’t changed anything for grid
Frank Cook
Registered User
1,602 posts
Angie Mulligan wrote:
This is where I’m confused. I did fall back first and hadn’t changed anything for grid
This is where I’m confused. I did fall back first and hadn’t changed anything for grid
I see that, even if one doesn't add the @support rule to display for grid, the Layout Display section of the Styles panel still allows one to create a Grid*, and this seems to be what has caused Angie Mulligan's problem.
Should perhaps that Layout Display section show only Flex, Block, and More when the Design For item in the Apply Styles secion shows Fallback First?
Frank
*PS It enters display:grid in the main.css file without any @support item at all.
Bob Visser
COO
827 posts
Angie Mulligan wrote:
This is where I’m confused. I did fall back first and hadn’t changed anything for grid
This is where I’m confused. I did fall back first and hadn’t changed anything for grid
If you're done with Fallback First you have to toggle the support query before applying display: grid. In your project the container that you call .grid-parent uses display grid for a fallback first scenario.
The future of web layout has arrived and it's called CSS Grid. CoffeeCup helps you to get ready with a free guide, the Grid Builder app plus cool demos & themes.
Bob Visser
COO
827 posts
Frank Cook wrote:
[quote=Angie Mulligan]
Should perhaps that Layout Display section show only Flex, Block, and More when the Design For item in the Apply Styles secion shows Fallback First?
[quote=Angie Mulligan]
Should perhaps that Layout Display section show only Flex, Block, and More when the Design For item in the Apply Styles secion shows Fallback First?
I would prefer not to. Using display: grid outside of support queries is very valid. Plus, there are people that don't take these old browsers into account and only design for Modern Browsers. Also, moving UI elements is usually not a good idea, it will confuse people. Just have to Toggle the Design For mode...
The future of web layout has arrived and it's called CSS Grid. CoffeeCup helps you to get ready with a free guide, the Grid Builder app plus cool demos & themes.
Twinstream
Registered User
811 posts
It may be related to the added breakpoints rather than the grid layout. I am checking into it further Angie and will get back to you with a solution.
Bootstrap 5 CSS Grid.
Frank Cook
Registered User
1,602 posts
Bob Visser wrote:
I would prefer not to. Using display: grid outside of support queries is very valid ...
I would prefer not to. Using display: grid outside of support queries is very valid ...
It is indeed valid code for Design For 'No Fallback', but it seems not to fit comfortably with the description Design For 'Fallback First'. Perhaps the settings for the current Design For Fallback First should be renamed as Design For No Fallback. Another Design For option (Design For Fallback First) could be made available with the Grid button greyed out or removed.
Frank
Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.
