WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Input area right margins in TwentyTwelve tables (9 posts)

  1. David Borrink
    Member
    Posted 1 year ago #

    I'm working on a TwentyTwelve child theme and have added a table with input areas that are text fields and text areas. The right margin of the text areas sets the field about 60 pixels from the right side of the table cell. I've checked many items in the CSS and cannot figure out where that 60 pixel margin is coming from. The input area CSS has no margin setting.

    The .entry-content td CSS says,

    .entry-content td, .comment-content td {
        border-top: 1px solid #BBBBBB;
        padding: 6px 10px 6px 0;
    }

    So there's no padding inside to force the right side of the table input area that far to the left.

    Also, the text areas in this table are horribly narrow. About 40 pixels wide total with the little gripper icon in the lower right corner. I type in content and the box doesn't expand.

    I haven't dealt with tables yet in TwentyTwelve so I'm wondering what's the trick to forcing my input fields to the full width of the table column yet keeping it responsive?

  2. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    It's really not possible to help with CSS without seeing the site - can you post a link to it?

    Alternatively, are you using a browser tool like Firebug to see what's going on with the CSS?

    Are you aware that twentytwelve is mobile-first, so you may need to put CSS in a media query to make it work well on regular screens.

  3. David Borrink
    Member
    Posted 1 year ago #

    Yes I'm using Firebug. Can't live without it.

    I'm diving into mobile design with this project and I've discovered that TwentyTwelve has the mobile-first element by way of a couple discussions I've come upon. So obviously I need to understand the media query aspect of working with Twenty Twelve. I've been doing designs for so long without considering mobile, but those days are done, and I've got a tablet now to verify my work - and I see I've got stuff to learn because I see that on my tablet, the text areas fill the width of the table cells and look great, but on a laptop, they're shortened. I'll check into this media query stuff.

  4. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Look on about line 1350 of the parent theme for the start of the media queries... It's a bit different, but pretty straightforward once you know what's going on :). They also work on resized browsers - so that's a good way to keep testing with Firebug and test changes as you go.

  5. David Borrink
    Member
    Posted 1 year ago #

    I see it at line 1417 of the TwentyTwelve parent theme. That's what kind of threw me off a bit because I saw two sets of CSS selectors in Firebug when I worked on the menus, something was way down the list in the parent theme as well.

    How does this work in a child theme? Do I need to repeat the media queries in the child theme to rewrite the CSS for those?

    At 1420 I see this:

    /* Minimum width of 600 pixels. */
    @media screen and (min-width: 600px)

    And at 1586 I see another set:

    /* Minimum width of 960 pixels. */
    @media screen and (min-width: 960px)

    and each has a set of codes below.

  6. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Yeah, once you know where those media queries are, you can use the line numbers in FF to help you decide what's relevant. The various sizes are for various sized devices, but I find that almost always the first one works to apply it to bigger screens - in which case you do need to use those in the child theme. But it does really depend on what you are doing - for something like a table, you may want to have different behavior for phones vs. tablets vs. laptops/desktops.

  7. David Borrink
    Member
    Posted 1 year ago #

    So then what is "default" looks fine on a tablet (Kindle Fire, in my case), but the table cells are too narrow on a laptop. Do I need to redefine new table data widths in the media query that starts with

    /* Minimum width of 960 pixels. */
    @media screen and (min-width: 960px)

    ? I get narrower field areas with no reason why they're narrower on a laptop. Perhaps by defining the margin settings...

    .entry-content td, .comment-content td {
        border-top: 1px solid #BBBBBB;
        padding: 6px 10px 6px 0;
    }

    ... under that query, would it work?

  8. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Hmm, like I said, it's REALLY hard to help with specific CSS questions without seeing the site (and being able to use Firebug) - so unless you can post a link to it, hard to say much.

    Possibly there is a min-width set for the tablet CSS?

  9. David Borrink
    Member
    Posted 1 year ago #

    I figured it out. I discovered "min-width" as the means to do this. I added a "min-width: 85%" declaration to the input area selector. That solved it. Now my fields are wider on regular browsers.

Topic Closed

This topic has been closed to new replies.

About this Topic