Skip to main content

Forums

This topic contains 6 replies, has 2 voices, and was last updated by  ninefootone 2 months, 1 week ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #279906

    ninefootone
    Participant

    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!

    #279936

    Beverleyh
    Participant

    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.

    #279942

    ninefootone
    Participant

    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.
    #279943

    ninefootone
    Participant

    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!

    #279969

    ninefootone
    Participant

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

    #279976

    Beverleyh
    Participant

    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.';
    }
    
    #280020

    ninefootone
    Participant

    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-link icon-logo-star icon-search icon-star