|
Deborah Fox
|
July 17, 2015 at 9:40 am
I customized the grid-view template to display the text below the event image, and to change the size of the image thumbnails. Everything looks great, except for one item that seems to throw off the alignment. It has an event title that is 3 lines long. Most other event titles are 2 lines long, however there are a few others that are 3 lines long and don’t seem to have this problem. The only thing unique about this row would be that the item in the first column has an event title 3 lines long, while the other events in the row have titles only 2 lines long.
If I shorten the title of this one problem event, it fixes the issue. However, as the events change when new ones are displayed the problem will still exist. How can I fix this?
Here is the css I used:
span {
}
.ee_grid_box a.darken {
display: inline-block;
background: white !important;
padding: 0;
position: inherit !important;
max-width: 235px;
}
.ee_grid_box a.darken span {
position: inherit;
top: 5px;
color: #3B3B3B;
left: 10px;
right: 10px;
opacity: 1 !important;
max-width: 175px;
width: 150px;
}
.ee_grid_box a.darken:hover span {
color: #6639B7 !important;
}
.ee_grid_box img {
width: 225px;
height: 150px;
}
|
|
Lorenzo Orlando Caum
|
July 17, 2015 at 11:22 am
Hi, for any styling questions, we’ll need to see a link to your site.
Thanks
—
Lorenzo
|
|
Deborah Fox
|
July 17, 2015 at 11:43 am
Thanks, Lorenzeo. I hadn’t published the page yet, but just did so you can see it. This is the one I’m having the issue with:
redacted – Event Espresso support team – LOC
|
|
Tony
|
July 17, 2015 at 12:34 pm
Hi Deborah,
You should be able to fix this using:
.ee_grid_box {
display: inline-block;
vertical-align: top;
}
.ee_grid_box a {
margin: 10%;
}
Which forces the container divs for each item to display as inline-block and then aligns them vertically from the top. With the above fix regardless of how long the event title is the next line should display fine, like so – http://take.ms/iSpmM
If you add the above to your CSS does it work as expected?
|
|
Deborah Fox
|
July 17, 2015 at 12:38 pm
Thanks, Tony. That resolves the vertical spacing, but now I need to modify things so they still fit 3 columns across on my page. I think I can fix it from here. Thanks for your help!
|
|
Tony
|
July 17, 2015 at 12:44 pm
That’s caused by the fixed margins on ‘.ee_grid_box a’. (10px)
Try reducing this:
.ee_grid_box a {
margin: 10%;
}
down to 5%, 10% displays correctly on my end.
|
|
Deborah Fox
|
July 17, 2015 at 6:24 pm
I appreciate your help, Tony. The page was loading fine in Safari — displaying 3 columns — but still only showing 2 columns in Firefox. I decreased the margin to 3% and now it looks great. Thanks again!
|
