Support » Fixing WordPress » 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]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Nik

    (@nvourva)

    Hello.
    Regarding your table borders, it appears that TwentySeventeen has some styling for tr borders and its border color is very close to the stripe’s background color making it indistinguisable.
    Try adding this style under Appearance > Customize > Additional CSS

    .wp-block-table tr {
    	border-bottom: 1px solid #000;
    }

    It should make the borders black and more visible.

    Thread Starter tracychamilton21

    (@tracychamilton21)

    Dear Nik,

    Thank you so much. I modified the CSS (by deleting “-bottom” so that the border went all the way around the table, rather than just across the bottom border, but there was still no internal vertical border between columns one and two. I looked up CSS for this and it seems to be “th, td”, but when I add them in it doesn’t add the middle vertical.

    I also tried
    col { border-right: solid }

    and left just to see if it makes a difference and it didn’t.

    And then this:
    .wp-block-table {
    border: 2px solid black;
    .column-2 {
    border-left: 1px solid #cccccc;
    }

    I’m also really having trouble getting my block images to be the same size. If you don’t know, do you know of someone who could help me with that?

    Thanks again Nik.

    Best,

    Tracy

    Thread Starter tracychamilton21

    (@tracychamilton21)

    Now that I’m looking more closely, I can see the line is there, so I’ll see if I can figure out how to make it darker. In case you can’t tell, I’m just learning css and html.

    Thread Starter tracychamilton21

    (@tracychamilton21)

    I did it! I found this code:
    th:not(:last-child), td:not(:last-child) { border-right: 1px solid #eeeeef; }

    added it to what you had sent me, and changed it to 2px and #000 for color and it’s all black now. It’s probably not the cleanest css route, but it worked.

    Now to the images…

    Nik

    (@nvourva)

    Regarding your content I would suggest switching TwentySeventeen from the two column layout to the one column layout, since from what I understand that’s what you are looking for.
    Try going to Appearance -> Customize -> Theme Options and check the One Column radio button, publish and have another look at your pages.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Responsive images, text scrolling, and table outlines’ is closed to new replies.