Skip to content
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

Merged
merged 9 commits into from
Sep 26, 2023
Merged

Conversation

padms
Copy link
Contributor

@padms padms commented Jul 14, 2023

No description provided.

@padms padms requested a review from a team as a code owner July 14, 2023 12:31
@@ -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 {
Copy link
Contributor

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),
Copy link
Contributor

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%;
Copy link
Contributor

@fernandolucchesi fernandolucchesi Aug 2, 2023

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) {
Copy link
Contributor

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%;
Copy link
Contributor

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%;
}
Copy link
Contributor

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));
  }
`

@padms padms merged commit cb1e367 into main Sep 26, 2023
@padms padms deleted the padms/1534 branch October 27, 2023 09:10
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants