-
Notifications
You must be signed in to change notification settings - Fork 8
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add links to iframe carousels and adjust size (#1534) #1763
Conversation
@@ -10,7 +10,16 @@ import CharCounterEditor from '../components/CharCounterEditor' | |||
import blocksToText from '../../helpers/blocksToText' | |||
import type { Rule, Block } from '@sanity/types' | |||
import type { ColorListValue } from 'sanity-plugin-color-list' | |||
import { title, frameTitle, description, cookiePolicy, aspectRatio, url, height } from './iframe/sharedIframeFields' | |||
import { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
changes missing in v3
width: 100%; | ||
min-width: 90%; | ||
/* exactly two items */ | ||
:first-child:nth-last-child(2), |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I don't think this is changing anything...
@@ -25,8 +26,16 @@ const Figure = styled.figure` | |||
width: 100%; | |||
` | |||
const ItemContainer = styled.div` | |||
min-width: 45%; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
we should aim to be mobile first, so min-width should be 100%, and then use @media(min-width: ) etcs..
:first-child:nth-last-child(2) ~ { | ||
min-width: 50%; | ||
} | ||
@media (max-width: 750px) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think it looks better splitting into 2 columns only for desktop screens
@@ -25,8 +26,16 @@ const Figure = styled.figure` | |||
width: 100%; | |||
` | |||
const ItemContainer = styled.div` | |||
min-width: 45%; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
could also use min-width: calc(50% - var(--space-medium))
(50% minus the gap of the grid)
} | ||
@media (max-width: 750px) { | ||
min-width: 100%; | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
const ItemContainer = styled.div`
width: 100%;
min-width: 100%;
@media (min-width: 1024px) {
min-width: calc(50% - var(--space-medium));
}
`
No description provided.