list view widget margins and paddings, and more

[Pau]

Dear TECPRO,

Would you be so kind helping me here with what I hope is a simple question?

On my homepage, I used 3 x columns with the events list view (showing different categories)

http://79.170.44.126/ref-spainculturescience.co.uk/

1) Would it be possible these columns align left and right to the border of the site? (see slideshow above to see where it finishes). Right now, I have quite a padding / margin on the right. What I want is these columns, left and right, to be flush with the other content and slideshow…

2) How can I get rid (eliminate) the ‘view more…’ that shows at the bottom of each column?

Many thanks as usual

[George]

Hey @Pau,

Thanks for reaching out.

We unfortunately can’t help out much with customization and design questions like this. Please check out this page for an overview of what things can and cannot be covered in customer support ? https://theeventscalendar.com/knowledgebase/what-support-is-provided-for-license-holders/

If you need to write custom CSS on your site, definitely check out a [free!] tool like Firebug if you use FireFox, or the Developer Tools for either Safari or Chrome. They have “Inspector” tools that let you zoom right over the element you want to hide or remove, and you can then write CSS from there more easily.

For example, you can use CSS like the following to hide the “View More” links you mentioned:


#main-content .et_pb_column p.tribe-events-widget-link {
display: none !important;
}

The alignment questions you asked about are a bit more involved, so I will let you take the reins on implementing those changes, but I hope this information is a helpful start!

Cheers,
George

[Pau]

Hi George, many thanks

yes, I know about the limits of help; but sometimes is an easy answer that we, mortals, don’t know (lol)

the snippet for view more did work well, and will investigate on the margins

many thanks

[Pau]

Oh, it wasn’t so difficult after all (I leave it here for other people)

.tribe-mini-calendar-event .list-info {
margin: 10px 0;
display: inline;
line-height: 1;
float: left;
width: 100%;
}

[George]

Thanks for sharing, @Pau! 😀

Open a new thread any time if other questions or issues ever arise.

Best of luck with your project,
George

[Author]

Posts