Support

Home Forums Event Espresso Premium Pull text out to sit beneath image on grid view – but keep it mobile-friendly!

Pull text out to sit beneath image on grid view – but keep it mobile-friendly!

Posted: November 17, 2014 at 5:00 pm


web comms

November 17, 2014 at 5:00 pm

Hi,

We have selected the grid view for our home page. It looks good but we would like to pull the text out to sit underneath the image rather than as an overlay, as we want to make the site as mobile-friendly as possible. Our in-house developer managed to do this but it threw all the alignment out.

http://artgallery.redland.qld.gov.au/

Secondly – we would like to add lines in-between each event in the list view (http://artgallery.redland.qld.gov.au/blog/exhibition-openings/) to make the differentiation between events more evident?

Thanks for your help πŸ™‚


Dean

November 18, 2014 at 5:14 am

How about something like this as custom CSS?

span {}.ee_grid_box a.darken {
display: inline-block;
background: white !important;
padding: 0;
position:inherit !important;
max-width: 210px;
}

.ee_grid_box a.darken span {
position: inherit;
top: 5px;
color: #000;
left: 10px;
right: 10px;
opacity: 1 !important;
max-width: 150px;
width: 150px;
}

.ee_grid_box a.darken:hover span {
color: #000 !important;
}

I didn’t do formal mobile testing but shrinking the browser it looked fine, it should get you in the right direction at least.


web comms

November 18, 2014 at 6:32 pm

Will give this a go – thanks πŸ™‚


web comms

November 18, 2014 at 7:02 pm

That worked well, thank you.

Just to follow up the second question – any ideas how to make a horizontal line appear in between events in the list view? http://artgallery.redland.qld.gov.au/blog/exhibition-openings/

Cheers,
Julia


Lorenzo Orlando Caum

  • Support Staff

November 18, 2014 at 7:28 pm

Hi,

Try this CSS:

article.espresso_events.type-espresso_events.status-publish.has-post-thumbnail.hentry {padding-bottom:25px; border-bottom: 3px solid grey;
}


Lorenzo


web comms

November 18, 2014 at 9:37 pm

Thanks πŸ™‚


Dean

November 19, 2014 at 4:54 am

Hi,

Do you have any further queries regarding this topic or can we mark this as resolved?

The support post ‘Pull text out to sit beneath image on grid view – but keep it mobile-friendly!’ is closed to new replies.

Have a question about this support post? Create a new support post in our support forums and include a link to this existing support post so we can help you.

Support forum for Event Espresso 3 and Event Espresso 4.
Documentation for EE3 and EE4
Documentation for Event Espresso 3

Documentation for Event Espresso 4

Status: closed

Updated by  Dean 5 years, 4 months ago ago

Topic Tags

Notifications

This topic is: not resolved
Do NOT follow this link or you will be banned from the site!