Display only the “vsel-image-info” column

Hi,

When I take a look at page 741 (homepage) I see 3 events.

But there’s something wrong with the structure of the event list there. The third event (Oliver) is inside the wrapper of the second event (Shirley Valentine), and the second event is inside the wrapper of the first event (1917).

Did you change core files of my plugin?

Guido

Guido, I only ever added the HR tag (you mentioned) in vsel-page-template.php, but have today reloaded loaded the latest plugin files via ftp to my site…. but I still do not see a grid.
I disabled all the 741 custom code to see if that made any difference..but no luck as the current 3 events are displaying in List mode on that page.

page 741

.page-id-741 .vsel-meta { clear: both; width: 100%; }
.page-id-741 .vsel-info { display: none; }
.page-id-741 .vsel-image-info { clear: both; width: 100%; float: left; }
.page-id-741 .vsel-image-info .vsel-image { float: left; margin: 0; max-width: 100%; }
.page-id-741 .vsel-image-info .vsel-image-left { float: left; margin: 0; max-width: 100%; }
.page-id-741 .vsel-content .vsel-image { padding-top: 18px; }
.page-id-741 .vsel-content .vsel-image { height: 220px; width: 149px; }

To be honest, your own custom CSS does mess things up a little.

First…

1) Change this:

.page-id-741 .vsel-meta { clear: both; width: 100%; }

Into:

.page-id-741 .vsel-meta { clear: both; width: 100% !important; }

2) Change this:

.page-id-741 .vsel-image-info { clear: both; width: 100%; float: left; }

Into:

.page-id-741 .vsel-image-info { clear: both; width: 100% !important; }

3) Change this:

.page-id-741 .vsel-image-info .vsel-image { float: left; margin: 0; max-width: 100%; }
.page-id-741 .vsel-image-info .vsel-image-left { float: left; margin: 0; max-width: 100%; }

Into:

.page-id-741 .vsel-image-info .vsel-image { float: left; margin: 0; max-width: 100% !important; }
.page-id-741 .vsel-image-info .vsel-image-left { float: left; margin: 0; max-width: 100% !important; }

4) Remove static height and width from this (or remove whole string):

 
.page-id-741 .vsel-content .vsel-image { height: 220px; width: 149px; }

5) And remove the static width from:

.page-id-741 .vsel-content .vsel-image { padding-top: 18px; width:20px; float:left; }

Second…

To make columns:

.page-id-741 #vsel .vsel-content {width:25%; float:left; padding:0 20px 10px; box-sizing: border-box;}

If this works, you need to add a media query for mobile screens, because 4 columns is too much for small screen.

Guido

• This reply was modified 3 years, 8 months ago by Guido. Reason: Have updated my reply

That worked Guido and brought the events into horizontal grid view.
I just need to increase the left & right spacing between them and reduce the image size to thumbnail.
Then as you mentioned, add some media queries.

Thank You for your expertise and time Guido.
Keith

You’re welcome!

Example for media query (2 columns):

/* Mobile */
@media screen and (max-width:767px) {
	.page-id-741 #vsel .vsel-content {width:50%;}
	.page-id-741 #vsel .vsel-content:nth-of-type(odd) {clear:left;}
}

You may need the clear in desktop view as well, for proper alignment in case of multiple rows of events.

Guido