Thanks for submitting this contribution @nitahieb, tagging @jamesachamp as a reviewer :)

@nitahieb I did a quick review and the following changes are required:

• 1. Increase max-width for footer

• 2. Need to adjust the width of the lists. http://staging.openlibrary.org/lists

• 3. Need to adjust content on http://staging.openlibrary.org/subjects/architecture

• 4. Need to resize the containers on the books page. http://staging.openlibrary.org/books/OL25352939M/Too_Ghoul_for_School_Attack_of_the_Zombie_Nits

• 5. Need to adjust contentHead max-width on http://staging.openlibrary.org/people/laciedoyle/lists/OL133511L/Reference

• 6. Need to adjust container width for My Reading log (http://staging.openlibrary.org/people/yashs911/books/want-to-read)

Thank you, I'll work on this now

@Yashs911
for 1 I changed max-width to 1200
2. I wasn't able to add lists to active lists to test it out, I created lists they just don't get added(prechange too)
3. I changed width to max-width(it was going off screen on phone without it) and changed it from 898 to 1138, 1200-(960-898)
4. changed the width from 70% of content area to 75%
5. changed content head from 918 to 1158
6. and I haven't been able to access the reading log page, the terminal puts out a KeyError: contact_id from openlibrary/core/civicrm.py I can post the logs but I may try to just reset the files.

I'd really appreciate help on 2 and 6 and general feedback

Thank you @nitahieb ! For (4), can you try removing the float:lefts, and setting .workDetails to be display: flex? Then move .workFooter out of .workDetails. Something sort of like:

/* page-book.css | http://staging.openlibrary.org/static/build/page-book.css?v=0b126c04d6828cc4e586489bf39de629 */

@media only screen and (min-width: 960px) {
  div.editionAbout {
    /* float: left; */
    /* width: 70%; */
    flex: 1;
  }
  div.editionCover {
    /* float: left; */
  }
}

#test-body-mobile {
  /* max-width: 1200px; */
  max-width: 1060px;
}

.header-bar {
  /* max-width: 1200px; */
  max-width: 1060px;
}

.workDetails {
  display: flex;
}

.workFooter {
  /* clear: both; */
}

Note we'll likely want to tweak the 1200px, so try to avoid having too many magic values based on it (like "75% of content area").

1200px is looking a touch too wide for me right now; can you try it at 1060px? That should also make a lot of the UI problems disappear as well.

@nitahieb
For 2. one way is to make 3-4 lists locally and add around 7-8 books, and after some time, you will be able to see the active lists.
For 6. Can you share the ss of the error

@cdrini I'll try that now, thank you! and I'll try to change all the max-values to be based on 1060px, I used 1200px because #4269
Just to confirm, to get workFooter out of WorkDetails I'll need to change the HTML?

@Yashs911 thank you the lists thing worked

By ss do you mean screenshot?

@nitahieb Yes exactly :) Hopefully that won't be too messy. We might change the width again as we play around with it, cause opinions always change once you start using something :)

I did all the other changes except for 4 and 6, for 2 i changed the list entry width from 280px to 30% of container, I don't know what others think about that. I also thought it would be good to centre the entries.

@nitahieb Great! I have updated my initial comment and the only thing that needs to be fixed now is [3] and [4].

• For [4] I would suggest you follow changed max-width of containers from max 960px to 1060px #4926 (comment).
• For [3] I think you should also update the .contentQuarter width according to the new max-width. From 215px to ~230px
  

@nitahieb would you be able to open a PR to fix the author's page? That one looks a little lopsided :) https://testing.openlibrary.org/authors/OL24522A/Jonathan_Swift