{"action":"created","issue":{"url":"https://api.github.com/repos/gatsbyjs/gatsby/issues/7917","repository_url":"https://api.github.com/repos/gatsbyjs/gatsby","labels_url":"https://api.github.com/repos/gatsbyjs/gatsby/issues/7917/labels{/name}","comments_url":"https://api.github.com/repos/gatsbyjs/gatsby/issues/7917/comments","events_url":"https://api.github.com/repos/gatsbyjs/gatsby/issues/7917/events","html_url":"https://github.com/gatsbyjs/gatsby/issues/7917","id":357577229,"node_id":"MDU6SXNzdWUzNTc1NzcyMjk=","number":7917,"title":"[gatsby-remark-images] Images cannot be left-aligned","user":{"login":"Jakst","id":3687893,"node_id":"MDQ6VXNlcjM2ODc4OTM=","avatar_url":"https://avatars3.githubusercontent.com/u/3687893?v=4","gravatar_id":"","url":"https://api.github.com/users/Jakst","html_url":"https://github.com/Jakst","followers_url":"https://api.github.com/users/Jakst/followers","following_url":"https://api.github.com/users/Jakst/following{/other_user}","gists_url":"https://api.github.com/users/Jakst/gists{/gist_id}","starred_url":"https://api.github.com/users/Jakst/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Jakst/subscriptions","organizations_url":"https://api.github.com/users/Jakst/orgs","repos_url":"https://api.github.com/users/Jakst/repos","events_url":"https://api.github.com/users/Jakst/events{/privacy}","received_events_url":"https://api.github.com/users/Jakst/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":3,"created_at":"2018-09-06T09:45:33Z","updated_at":"2018-09-11T07:48:57Z","closed_at":"2018-09-11T07:48:58Z","author_association":"NONE","body":"<!--\r\n  Please fill out each section below, otherwise your issue will be closed. This info allows Gatsby maintainers to diagnose (and fix!) your issue as quickly as possible.\r\n\r\n  Useful Links:\r\n  - Documentation: https://www.gatsbyjs.org/docs/\r\n  - How to File an Issue: https://www.gatsbyjs.org/docs/how-to-file-an-issue/\r\n\r\n  Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues\r\n-->\r\n\r\n## Description\r\n\r\nThere is no way to apply style to images so that they are left-aligned. Mainly due to `margin-left: auto; maring-right: auto;` coming after custom wrapperStyle in inline.\r\n\r\nIf the image has a title and showCaptions is set to `true`, the situation is even worse, because the style is applied on a wrapper outside the one applying the  centering.\r\n\r\n### Steps to reproduce\r\n\r\nIn gatsby-remark-images options, add `wrapperStyle: 'margin-left: 0; margin-right: 0;',`\r\n\r\n### Expected result\r\n\r\nImages should be left-aligned\r\n\r\n### Actual result\r\n\r\nImage is still centered, because the custom styles get applied before the hardcoded styles.\r\n\r\n### Environment\r\n\r\n```\r\n  System:\r\n    OS: macOS High Sierra 10.13.6\r\n    CPU: x64 Intel(R) Core(TM) i7-4870HQ CPU @ 2.50GHz\r\n    Shell: 5.3 - /bin/zsh\r\n  Binaries:\r\n    Node: 10.9.0 - /usr/local/bin/node\r\n    Yarn: 1.9.4 - /usr/local/bin/yarn\r\n    npm: 6.2.0 - /usr/local/bin/npm\r\n  Browsers:\r\n    Chrome: 69.0.3497.81\r\n    Firefox: 59.0.2\r\n    Safari: 11.1.2\r\n  npmPackages:\r\n    gatsby: ^1.9.255 => 1.9.277 \r\n    gatsby-link: ^1.6.41 => 1.6.46 \r\n    gatsby-plugin-catch-links: ^1.0.24 => 1.0.24 \r\n    gatsby-plugin-manifest: ^1.0.27 => 1.0.27 \r\n    gatsby-plugin-offline: ^1.0.18 => 1.0.18 \r\n    gatsby-plugin-react-helmet: ^2.0.11 => 2.0.11 \r\n    gatsby-plugin-sharp: ^1.6.48 => 1.6.48 \r\n    gatsby-plugin-styled-components: ^2.0.11 => 2.0.11 \r\n    gatsby-plugin-typescript: ^1.4.20 => 1.4.20 \r\n    gatsby-remark-autolink-headers: ^1.4.17 => 1.4.19 \r\n    gatsby-remark-external-links: ^0.0.4 => 0.0.4 \r\n    gatsby-remark-images: ^1.5.67 => 1.5.67 \r\n    gatsby-remark-prismjs: ^2.0.2 => 2.0.5 \r\n    gatsby-remark-responsive-iframe: ^1.4.20 => 1.4.20 \r\n    gatsby-remark-smartypants: ^1.4.12 => 1.4.12 \r\n    gatsby-source-filesystem: ^1.5.34 => 1.5.39 \r\n    gatsby-transformer-remark: ^1.7.40 => 1.7.44 \r\n```\r\n"},"comment":{"url":"https://api.github.com/repos/gatsbyjs/gatsby/issues/comments/420180696","html_url":"https://github.com/gatsbyjs/gatsby/issues/7917#issuecomment-420180696","issue_url":"https://api.github.com/repos/gatsbyjs/gatsby/issues/7917","id":420180696,"node_id":"MDEyOklzc3VlQ29tbWVudDQyMDE4MDY5Ng==","user":{"login":"kakadiadarpan","id":10805593,"node_id":"MDQ6VXNlcjEwODA1NTkz","avatar_url":"https://avatars0.githubusercontent.com/u/10805593?v=4","gravatar_id":"","url":"https://api.github.com/users/kakadiadarpan","html_url":"https://github.com/kakadiadarpan","followers_url":"https://api.github.com/users/kakadiadarpan/followers","following_url":"https://api.github.com/users/kakadiadarpan/following{/other_user}","gists_url":"https://api.github.com/users/kakadiadarpan/gists{/gist_id}","starred_url":"https://api.github.com/users/kakadiadarpan/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/kakadiadarpan/subscriptions","organizations_url":"https://api.github.com/users/kakadiadarpan/orgs","repos_url":"https://api.github.com/users/kakadiadarpan/repos","events_url":"https://api.github.com/users/kakadiadarpan/events{/privacy}","received_events_url":"https://api.github.com/users/kakadiadarpan/received_events","type":"User","site_admin":false},"created_at":"2018-09-11T07:48:57Z","updated_at":"2018-09-11T07:48:57Z","author_association":"CONTRIBUTOR","body":"Hi @Jakst, currently `margin-left: auto; maring-right: auto;` is hardcoded in the source code. I was able to overcome this issue using `!important`, I was able to use that and align the image to the left. This is how my config for `gatsby-remark-images` look:\r\n\r\n```js\r\n{\r\n            resolve: 'gatsby-remark-images',\r\n            options: {\r\n              // It's important to specify the maxWidth (in pixels) of\r\n              // the content container as this plugin uses this as the\r\n              // base for generating different widths of each image.\r\n              maxWidth: 590,\r\n              wrapperStyle:\r\n                'border: 5px solid red; margin-left: 0!important; margin-right: 0!important;',\r\n            },\r\n          },\r\n```"}}
{"actor":{"display_login":"kakadiadarpan"}}