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.
|
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 %}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
|
@ -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
Loading…
Reference in a new issue