Forums

Give help. Get help.

  • # December 5, 2018 at 1:36 pm

    I’m struggling to get a table cell to do what I want it to here…

    Booking – Contend 2019

    This table is generated by a WordPress plugin so I can’t control the HTML. Can anyone help work out how to get the ‘We have a limited number of rooms…’ td to go full width underneath the other tds?

    I’ve managed it on the lower widths using media queries but for some reason I just can’t get it to work on desktop.

    I’m sure I’m just being thick but nothing I’ve tried works.

    Thanks!

    # December 5, 2018 at 11:08 pm

    I haven’t looked — can’t… on mobile — but making a td into a block element by changing its display property can sometimes be useful.

    Are the issues related to you not being able to target the specific td with appropriate selectors, OR that you can target it but can’t get the full width to work as desired?

    To attract helpful responses, try mocking up the issue in a reduced CodePen demo – code is easier for us to troubleshoot there (we’re not restricted to the developer toolbar), and doesn’t come with the weight of all the extra code and distractions of a full website. Note that we only need the minimal amount of CSS and HTML to illustrate the problem. We don’t need your whole codebase. You may have to use the developer toolbar and inspect each element in turn to extract all the pertinent styles.

    # December 6, 2018 at 3:35 am

    Thanks! I’ll copy the code below. What I’m trying to do is make the…

    full width so that the three tds above are across the page but this one is full width below them.

    Does that make sense? I’ve played with all sorts of display options (including block and table-row) etc. but I’m guessing other CSS is conflicting.

    It’s currently got a style of ‘display: table-cell;’ but when I try to overwrite that with ‘display:table-row;’ it doesn’t do anything.

    At ‘max-width:767px’ I’ve applied these styles…

    .tribe-events-tickets td {
        max-width: 100% !important;
        width: 100% !important;
    }   
    

    Which works but that makes all the tds 100% so they all stack on top.

    When I try those styles just on the one cell it doesn’t work.

    Am I being clear?!


    Unlimited available

    Sole Occupancy En-suite £289.00


    Unlimited available

    Shared En-suite
    £259.00
    We have a limited number of shared rooms. We will do our best to accommodate your sharing choice.
    # December 6, 2018 at 3:37 am

    Sorry, just realised that’s still not helpful. I need to try harder to mock this up on CodePen and try again. I’ll come back!

    # December 7, 2018 at 7:52 am

    OK, I think I worked it out. Does this enable people to see it…

    # December 7, 2018 at 11:18 am

    Hmmm, I think I’d be tempted to hide that cell (display:none;) and then use a pseudo element to reinsert the text where you want it.
    Try something like;

    #TD_37:before {
      display:block;
      content:'We have a limited number of shared rooms. We will do our best to accommodate your sharing choice.';
    }
    
    # December 10, 2018 at 4:20 am

    Thanks, maybe I’ll just do that (hide the cell and add in separately).

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag