Eliminate Vertical Space Between Photos

  • Author
    Posts
  • #145991

    Wondering if there’s a way to eliminate the space between pictures on a page, so that the pictures string together to almost look like one picture.

    Basically, I’m trying to backdoor a solution for adding a formatted table (with various color backgrounds and borders) without knowing how to code one in.

    The blog I need help with is arsenalweekly.com.

    #146011

    themezee
    Theme Author

    Hi there,

    Thanks so much for using Maxwell.

    Can you please send me a URL to a post or page with multiple images? Are you using a Gallery block or maybe columns with multiple images?

    Or are you talking about the featured images in your blog post?

    I’m sorry, but you have to describe in detail what you are trying to achieve exactly, I do not really get it.

    Best,
    Thomas

    #146025

    Here’s a link to what I’m talking about.

    I mean, ideally I’m able to code a table that looks moderately like that. Like this, but with color.

    Any help (with either) is appreciated, but no worries if it’s not possible :)

    #146104

    themezee
    Theme Author

    Thanks for explanation.

    It is possible to style the table with colors. How did you insert the table? At the moment all rows use the same HTML structure. You would need <th> for heading cells and <td> tags for normal cells to apply a different styling.

    Best,
    Thomas

    #146120

    Can you give me an example? Here’s the first line of code for what amounts to a header row:

    <tr>
    <td style=”text-align:center;” colspan=”5″ rowspan=”1″><span style=”color:#000000;”>First Half</span></td>
    </tr>

    What (and where) would I insert to make the backround a different color?

    #146149

    themezee
    Theme Author

    You need to first change your HTML to a correct table structure.

    For example:

    <table>
        <thead>
            <tr>
                <th>The table header</th>
                <th>with two columns</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>The table body</td>
                <td>with two columns</td>
            </tr>
        </tbody>
    </table>

    Then you can add extra CSS to style the header and body of your table differently:

    
    tr th {
        background-color: red;
        color: #fff;
    }
    
    tr td {
        background-color: #eee;
    }
    

    You can insert the CSS code in the Customizer, on Customize > CSS.

    Best,
    Thomas

    #146150

    themezee
    Theme Author

    You can also use classes in your HTML code and then apply styling to that class within your CSS code. That can help if you want different styling for some cells in your table body.

    For example:

    <tr>
                <td class="my-own-class" colspan="5">Content</td>
    </tr>

    CSS:

    .my-own-class {
        background-color: red;
        color: #fff;
    }

    Cheers,
    Thomas

The topic ‘Eliminate Vertical Space Between Photos’ is closed to new replies.