search

danurbanowicz / eleventy-netlify-boilerplate

A template for building a blog with the Eleventy static site generator and Decap CMS
https://eleventy-netlify-boilerplate.netlify.app/
MIT License
528 stars 183 forks source link

Images and text are not fully responsive/cut off on mobile #38

Closed zachco closed 4 years ago

zachco commented 4 years ago

Not sure if its a CSS issue or you'd need to use something like the Eleventy image responsiver plugin, but it would be nice for the text and images to be fully responsive and not cut off on mobile and browser resize.

Taken on my computer (not zoomed):

Screen Shot 2020-06-23 at 1 21 50 PM

Taken on my phone (not zoomed):

Thank you!

danurbanowicz commented 4 years ago

Basic responsive image support was missing from the stylesheet for some reason :astonished: and has now been added with commit https://github.com/danurbanowicz/eleventy-netlify-boilerplate/commit/b1083a2e8dad0df36a892c6970dadd5eb1de3e3d

These two lines of CSS will ensure that images do not grow outside of their parent container.

img {
  max-width: 100%;
  height: auto;
}

Anything more snazzy than that is probably outside the scope of this template, although the plugins you mentioned look quite interesting.