Removing Space

  • Author
    Posts
  • #2680949

    joeybazarro
    Member

    Hello-

    I would like to remove some of the white space between a list of shows and the sidebar widget on my page. Right now, the list is formatted far to the left and I’m trying to center it more.

    Is there a way to do this?

    Also, does anyone know of a good way to create a list like I’ve done for shows or events? Right now I’m creating it manually by formatting it myself.

    The theme I am using is Gateway, and the link to the page is: https://fiction-non-fiction.com/shows-4/

    Thanks for the help!

    joey

    The blog I need help with is fiction-non-fiction.com.

    #2680994

    hallluke
    Member

    My suggestion would be using either an HTML table to organise the shows and dates into a grid or using a description list (dl. Either that or you can use span tags and assign two different classes (say “showdate” and “showdescription”).

    Then you can use CSS to do all the styling and you don’t have to try to align things correctly by pressing the spacebar so much.

    The table example would look a bit like this:

    <h4>Upcoming Shows</h4>
    <table>
      <tr>
        <th>Date</th>
        <th>Venue</th>
        <th>Location</th>
        <th>Time</th>
        <th>Admission</th>
      </tr>
      <tr>
        <td>7/7/16</td>
        <td><a href="http://www.tripsantamonica.com/">Trip</a></td>
        <td>Santa Monica, CA</td>
        <td>9:45pm</td>
        <td>Free</td>
      </tr>
      <tr>
        <td>8/5/16</td>
        <td><a href="http://www.hamandeggstavern.com/">Ham and Eggs Tavern</a></td>
        <td>Los Angeles, CA</td>
        <td>9:00pm</td>
        <td>Free</td>
      </tr>
    </table>

    I think it looks really good, your theme already styles tables nicely so copy that into your page and preview it for yourself!

    #2681018

    joeybazarro
    Member

    Thanks! That is much better.

    Is there a way to work with this table in the Visual Editor? I’m not as savvy with the html, but I could make it work.

    Also, what CSS should I use to center the table over more or eliminate space between the table and the sidebar?

    Thanks for the help!

    Joey

    #2681025

    hallluke
    Member

    I don’t think the visual editor gives you a way of inserting tables. You can copy in the HTML and then switch back to the visual editor for editing the contents to get a better idea of how it will look.

    To make sure all tables on that page are full-width you can include this line of CSS:

    body.page-id-95 table {
    	width: 100%;
    }
    #2681030

    joeybazarro
    Member

    Awesome. That worked perfectly.

    Thank you!

The topic ‘Removing Space’ is closed to new replies.