Make sure .full negative margin sticks on images wrapped in <p></p>

This commit is contained in:
Michael Rose 2016-04-01 16:31:31 -04:00
parent 7db4724ddf
commit c9da12f79e
3 changed files with 18 additions and 4 deletions

View file

@ -9,6 +9,20 @@ tags:
The preferred way of using images is placing them in the `/images/` directory and referencing them with an absolute path. Prepending the filename with `{% raw %}{{ site.url }}{{ site.baseurl }}/images/{% endraw %}` will make sure your images display properly in feeds and such. The preferred way of using images is placing them in the `/images/` directory and referencing them with an absolute path. Prepending the filename with `{% raw %}{{ site.url }}{{ site.baseurl }}/images/{% endraw %}` will make sure your images display properly in feeds and such.
Standard image with no width modifier classes applied.
**HTML:**
```html
{% raw %}<img src="{{ site.url }}{{ site.baseurl }}/images/filename.jpg" alt="">{% endraw %}
```
**or Kramdown:**
```markdown
{% raw %}![alt]({{ site.url }}{{ site.baseurl }}/images/filename.jpg){% endraw %}
```
![Unsplash image 9]({{ site.url }}{{ site.baseurl }}/images/unsplash-image-9.jpg) ![Unsplash image 9]({{ site.url }}{{ site.baseurl }}/images/unsplash-image-9.jpg)
Image that fills page content container by adding the `.full` class with: Image that fills page content container by adding the `.full` class with:
@ -16,13 +30,13 @@ Image that fills page content container by adding the `.full` class with:
**HTML:** **HTML:**
```html ```html
<img src="/images/filename.jpg" alt="" class="full"> {% raw %}<img src="{{ site.url }}{{ site.baseurl }}/images/filename.jpg" alt="" class="full">{% endraw %}
``` ```
**or Kramdown:** **or Kramdown:**
```markdown ```markdown
{% raw %}![alt](/images/filename.jpg) {% raw %}![alt]({{ site.url }}{{ site.baseurl }}/images/filename.jpg)
{: .full}{% endraw %} {: .full}{% endraw %}
``` ```

View file

@ -138,7 +138,7 @@ body:hover .visually-hidden button {
.full { .full {
@include breakpoint($large){ @include breakpoint($large){
margin-right: -1 * span(2.5 of 12); margin-right: -1 * span(2.5 of 12) !important;
} }
} }

File diff suppressed because one or more lines are too long