Problem with hover on narrow devices

[[email protected]]

Hi, I'm a graphic designer working with a developer and we've run into an issue. She has a hover animation on the names of our employees on our TEAM page (http://03cad97.netsolhost.com/wordpress1/team/) and it did look great on all devices except narrow ones. We were getting a strange two column result that required horizontal scrolling to see. I've troubleshooted in so many ways, but I'm not a developer, I'm learning CSS on the fly, and I'm struggling. She's frustrated and wants to scrap it, and her budget from the company is running out, but I'm not willing to give up yet. Originally, she'd inserted the CSS code directly to the page. Currently, we are using TablePress and put each photo in a responsive table cell, but there are still issues and the creator acknowledged that the code may be too complicated for what TP was designed to do. He suggested a responsive columns plugin. Which I used and simply copied and pasted the developer's codes into the columns (http://03cad97.netsolhost.com/wordpress1/column-team/). Now, it looks great on mobile devices, but the text for the employee's name is too low over the image.

Does anyone have a solution? What code would you need to see if you can help?

http://03cad97.netsolhost.com/wordpress1/team/

[Tom]

If you stick with TablePress, this may help:
https://tablepress.org/extensions/responsive-tables/

For the column-based layout no plugin is needed; you can use Genesis content column classes
http://my.studiopress.com/tutorials/content-column-classes/

For the existing column setup, try this adjustment in your child theme stylesheet; adjust the value for "bottom" as desired; 50px places the text across the shoulders:

.principals .person-name-title {
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: -50px;            /* Adjust this value */
    z-index: 5;
    -moz-transition: all .3s linear;
    -webkit-transition: all .3s linear;
    -ms-transition: all .3s linear;
    -o-transition: all .3s linear;
    transition: all .3s linear;
    overflow: hidden;
}

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[Victor Font]

Tables should never be used for page layout. Not only is it old school, but tables are bad for the following reasons:

• Slow to render as the browser needs to download most—if not all—of the table to render it properly
• They require more HTML than non-table layouts which means slower loading and rendering, as well as an increased bandwidth usage
• They can be a nightmare to maintain as they can quickly get complex
• They can break text copying
• They negatively affect screen readers and may make your content inaccessible to some users
• They are not as flexible as using proper semantic markup
• They were never intended to be used for page layouts
• Making tables into a responsive layout is very difficult to control

A better choice is formatting the area with divs and Genesis column classes (http://my.studiopress.com/tutorials/content-column-classes/) or CSS table classes: http://programmers.stackexchange.com/questions/277778/why-are-people-making-tables-with-divs

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Author]

Posts