Hopiu/wagtail
1
0
Fork 0
mirror of https://github.com/Hopiu/wagtail.git synced 2026-04-15 20:41:01 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #302 from jeffrey-hearn/docs-embed-overflow-css

Browse source 
Docs: responsive embeds and images CSS suggestion
This commit is contained in:
Dave Cranwell 2014-06-09 09:46:48 +01:00
commit cf9dd86f26
1 changed files with 26 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
docs/building_your_site/frontenddevelopers.rst
View file

@ -190,6 +190,32 @@ Only fields using ``RichTextField`` need this applied in the template.
.. Note::
Note that the template tag loaded differs from the name of the filter.
Responsive Embeds
-----------------
Wagtail embeds and images are included at their full width, which may overflow the bounds of the content container you've defined in your templates. To make images and embeds responsive -- meaning they'll resize to fit their container -- include the following CSS.
.. code-block:: css
.rich-text img {
max-width: 100%;
height: auto;
}
.responsive-object {
position: relative;
}
.responsive-object iframe,
.responsive-object object,
.responsive-object embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Internal links (tag)
~~~~~~~~~~~~~~~~~~~~