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

[Solution] Full width images in markdown #14

Open
Necmttn opened this issue Jan 9, 2019 · 3 comments
Open

[Solution] Full width images in markdown #14

Necmttn opened this issue Jan 9, 2019 · 3 comments

Comments

@Necmttn
Copy link

Necmttn commented Jan 9, 2019

in PostContent.tsx

export const PostFullContent = styled.section`
	max-width: 1040px;
	...

   ...
	 .gatsby-resp-image-wrapper {
    	// For Full size images
    	max-width: none !important;
  	}

	img[alt$='full'] {
    max-width: none;
    position: absolute !important;
    width: 100vw !important;
    margin-left: calc((-100vw + 1040px) / 2) !important;
  	}
	...
`

and remove inner outer style from post.tsx wrapper div.

@Necmttn Necmttn changed the title Full width images in markdown *Solution* [Solution] Full width images in markdown Jan 9, 2019
@scttcper scttcper self-assigned this Jan 9, 2019
@Necmttn
Copy link
Author

Necmttn commented Jan 10, 2019

and forgot to mention you need to add full at the end of alt
for example.

![test image full](img/testimg1.jpg)

@amaljithev
Copy link

Any update on this @scttcper ?

@scttcper
Copy link
Owner

i'm not sure casper 3 even has full width images

@scttcper scttcper removed their assignment Feb 7, 2024
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

No branches or pull requests

3 participants