Responsive images, text scrolling, and table outlines
-
Hello everyone,
The page I need help with, for example: https://tracychapmanhamilton.com/digital-art-history/
I used this additional CSS to make my text content wider so that you no longer had to scroll from left to right to read the whole of my table on a mac or pc (you still need to scroll on a phone).
/* Wider Content */ @media screen and (min-width: 1200px) { /* For devices with more than or equal to 1200px width */ .wrap { max-width:60%!important; } }
but my images are not resizing in a similar manner. I’ve been trying to adjust them manually. They read as all being 791 wide but, are actually different widths once I publish them.
So then I added in this code and it made two of the images respond to become the width of the text, but not the other three, even though they all say they are the same width of 791 when editing them. When published on my laptop they are still different widths. They look great on my phone (but, again, you need to scroll there).
.wrap { max-width: 1400px; } /*For Content*/ .has-sidebar:not(.error404) #primary { width: 70%; } /*set the sidebar width and alignment*/ .has-sidebar #secondary { width: 25% !important; float: right; }
I’m also having trouble with my table border not showing up. It’s making the weeks in my syllabus fairly confusing with that lack of definition.
I’ve added in this code from reading, but neither seem to have helped.
.tablepress-id-13 th, .tablepress-id-13 td { border: 1px solid #cccccc !important; }
and
.finance tbody { background: #ccc; }
Thank you so much for your help.
Tracy
The page I need help with: [log in to see the link]
- The topic ‘Responsive images, text scrolling, and table outlines’ is closed to new replies.