|
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
|
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?
|
