The tooltips are not the right shade of blue. They should be the same as hyperlinks. See image for the different colors. (This is not exclusively a mobile issue; I just caught it on mobile). The first screen shot below shows this.
The images used to illustrate section pages should of course narrow like the text. However, some images are spilling off the page. The second screen shot below shows this.
On the timeline, occasionally some text is being rendered off the screen. See third screen shot below, text on the left.
Critical edition subpages are showing the grid image. See fourth screen shot below.
The tooltips are not the right shade of blue. They should be the same as hyperlinks. See image for the different colors. (This is not exclusively a mobile issue; I just caught it on mobile). The first screen shot below shows this.
Should be sorted now.
The images used to illustrate section pages should of course narrow like the text. However, some images are spilling off the page. The second screen shot below shows this.
This issue exists on production as well, it's cause you have a hard-coded width for the table in the HTML. You'll have to remove that from the nodes content.
<img width="1283" alt="screen shot 2017-08-06 at 20 51 50" src="https://user-images.githubusercontent.com/487373/29006616-330123d6-7aeb-11e7-8ebd-b45e7a28b6e4.png">
On the timeline, occasionally some text is being rendered off the screen. See third screen shot below, text on the left.
Issue with older iPhones, should be sorted now.
Critical edition subpages are showing the grid image. See fourth screen shot below.
This is because the fields are filled out, if no image is placed in them then no image will appear.
<img width="274" alt="screen shot 2017-08-06 at 15 09 10" src="https://user-images.githubusercontent.com/487373/29006630-5d72c750-7aeb-11e7-8494-ab07e4a5ef12.png">
When I do the migration I'll remove this 'place holder' images from the nodes content.
I'll leave that with you. I've added a note about it to ticket #159.
Although what you've indicated is correct, I don't think that's the issue. See screen shot, which shows the same image on prod (left) and stage (right). As you can see, the image on prod -- despite the fixed width -- still sizes correctly on mobile.
Although what you've indicated is correct, I don't think that's the issue. See screen shot, which shows the same image on prod (left) and stage (right). As you can see, the image on prod -- despite the fixed width -- still sizes correctly on mobile.
If you check with Chrome (and likely other browsers) aside from Firefox / iPhone you'll see the issue exists on production.
The reason it's working on Firefox, iPhone is because max-width: 100% is also specified for tables on production.
all elements but non-replaced inline elements, table rows, and row groups
which would mean it should apply to table elements.
This means Chrome is in the wrong, but there's nothing we can do about that.
Either way for this to work on all browsers you can't use explicit width on table elements, try instead to use only max-width when you're specifying that you want the image to be at most a certain size, which should be safe.
Ok, thanks for letting me know and looking into this. Interesting to learn about this shortcoming of Chrome. Is there any way of generating a list of pages with tables/images that have a width set like this? It's easy to fix, but without list, I'll have to go through the pages one by one to find the bits to fix.
In looking at the site on stage on my mobile, I found four minor issues. See screen shots. The first two are taken from the following page but are not exclusive to it: http://livingstonestage.lib.umd.edu/about-this-site/leap-2013-2017-project-history-part-ii
The tooltips are not the right shade of blue. They should be the same as hyperlinks. See image for the different colors. (This is not exclusively a mobile issue; I just caught it on mobile). The first screen shot below shows this.
The images used to illustrate section pages should of course narrow like the text. However, some images are spilling off the page. The second screen shot below shows this.
On the timeline, occasionally some text is being rendered off the screen. See third screen shot below, text on the left.
Critical edition subpages are showing the grid image. See fourth screen shot below.
Should be sorted now.
This issue exists on production as well, it's cause you have a hard-coded width for the table in the HTML. You'll have to remove that from the nodes content.
<img width="1283" alt="screen shot 2017-08-06 at 20 51 50" src="https://user-images.githubusercontent.com/487373/29006616-330123d6-7aeb-11e7-8ebd-b45e7a28b6e4.png">
Issue with older iPhones, should be sorted now.
This is because the fields are filled out, if no image is placed in them then no image will appear.
<img width="274" alt="screen shot 2017-08-06 at 15 09 10" src="https://user-images.githubusercontent.com/487373/29006630-5d72c750-7aeb-11e7-8494-ab07e4a5ef12.png">
When I do the migration I'll remove this 'place holder' images from the nodes content.
1/3. Looks good. Thank you!
If you check with Chrome (and likely other browsers) aside from Firefox / iPhone you'll see the issue exists on production.
The reason it's working on Firefox, iPhone is because
max-width: 100%
is also specified for tables on production.The spec (the CSS 3 spec for CSS Intrinsic & Extrinsic Sizing refers to the CSS 2.1 spec on this rule) clearly states (https://drafts.csswg.org/css-sizing-3/#width-height-keywords):
This means Chrome is in the wrong, but there's nothing we can do about that.
Either way for this to work on all browsers you can't use explicit
width
on table elements, try instead to use onlymax-width
when you're specifying that you want the image to be at most a certain size, which should be safe.Ok, thanks for letting me know and looking into this. Interesting to learn about this shortcoming of Chrome. Is there any way of generating a list of pages with tables/images that have a width set like this? It's easy to fix, but without list, I'll have to go through the pages one by one to find the bits to fix.