Make sure .full negative margin sticks on images wrapped in <p></p>
This commit is contained in:
parent
7db4724ddf
commit
c9da12f79e
3 changed files with 18 additions and 4 deletions
|
@ -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.
|
||||
|
||||
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)
|
||||
|
||||
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
|
||||
<img src="/images/filename.jpg" alt="" class="full">
|
||||
{% raw %}<img src="{{ site.url }}{{ site.baseurl }}/images/filename.jpg" alt="" class="full">{% endraw %}
|
||||
```
|
||||
|
||||
**or Kramdown:**
|
||||
|
||||
```markdown
|
||||
{% raw %}![alt](/images/filename.jpg)
|
||||
{% raw %}![alt]({{ site.url }}{{ site.baseurl }}/images/filename.jpg)
|
||||
{: .full}{% endraw %}
|
||||
```
|
||||
|
||||
|
|
|
@ -138,7 +138,7 @@ body:hover .visually-hidden button {
|
|||
|
||||
.full {
|
||||
@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
Loading…
Reference in a new issue