May I suggest adding these two lines in 'style.css' (line 145+) for images to behave responsively:

max-width: 100%;
height: auto;

So that img will be:

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

Comments

mermentau’s picture

mermentau commented

Dig lower in style.css and you will find around line 1316:

@media only screen and (max-width: 320px) {
  #content img,
  #sidebar-first img,
  #sidebar-second img {
    max-width: 100%;
    height: auto;
  }

There are 3 other places below that using max-width: 100% for images. As you can see none of them effect #top-columns or #bottom-columns. The code evolved over time and that never got added in.
So why not do as you suggest and make available everywhere? Because I never really got comfortable with the downsides to doing that. It's easy to search and find problems like when using CKEditor

Using max-width: 100% will allow you to send a giant image to an iPhone and it show up as a thumbnail, but the owner of the iPhone takes a data usage hit. His phone loads the big image even though he sees it small.

Drupal 8 comes with the Picture module to solve these problems and it's been backported to Drupal 7. I admit using that is more complex than some site builders want, but by not building in max-width: 100% maybe they will at least have to think about it. The alternative allows them to push big images to small devices on data plans and not even realize what's happening.

Your thoughts?

Egmund’s picture

Egmund commented

Yes, your concerns make sense, especially bandwidth. But since max-width is already there I do not see that bigger a 'damage' by making it universal.

I asked, since I then would eliminate editing style.css after upgrade. Guess I could have it in an external css.

As an alternative, it could be mentioned in the documentation.

mermentau’s picture

mermentau commented

The Drupal way is to create a quick sub-theme and make your tweaks in there then theme updates don't mess with your changes. Documentation on Mayo sub-theme is here.

Egmund’s picture

Egmund commented

Yes, I read the doc re. sub-theming Mayo. However I can not get the inheritance of style.css to work, so I gave up on that solution. (Yes I have a subtheme style.css & it is properly declared in subtheme.info).

Any ideas? (& sorry, this is off topic).

Update: I reinstalled the whole site and sub-theming works like a charm. Something in the Drupal nstall or a module must have gone wrong. So, sub-theming from here on.

mermentau’s picture

mermentau commented
Status: Active » Closed (won't fix)

Update: I reinstalled the whole site and sub-theming works like a charm. Something in the Drupal nstall or a module must have gone wrong. So, sub-theming from here on.

Happy to hear that.