|
Delilah Martinez
|
April 2, 2015 at 1:36 pm
I am having this continuing issue with the event images NOT showing on mobile. Can someone please help get this resolved. Thanks
calendar page:
http://vippaints.com/sandiego/san-diego-calendar/
I’ve tried using some custom css that Dean from support staff posted. See below. It works but then it takes away the images when you are viewing them from your computer.
#espresso_calendar .fc-event-title,
#espresso_calendar .time-display-block,
#espresso_calendar .thumb-wrap,
.ui-tooltip-content p {
display: block;
}
#espresso_calendar .fc-event {
min-height: 30em;
max-height: 30em;
}
#espresso_calendar .thumb-wrap,
.ui-tooltip-content p {
display: block;
}
#espresso_calendar .fc-event {
min-height: 3em;
max-height: 3em;
}
|
|
Lorenzo Orlando Caum
|
April 2, 2015 at 1:53 pm
Hi, could you remove that CSS and then update this support post?
—
Lorenzo
|
|
Delilah Martinez
|
April 15, 2015 at 2:21 pm
I’ve removed it and below is all that I have in my custom css file.
#logo {
padding: 15px 0 0;}
#top-panel .login-header {
display: none;
}
#top-panel #searchform {display:none}
#top-panel .top-info {
width: 350px;}
@media only screen and (max-width: 767px){
.tiled-menu .item-title {
position: static;
color: inherit;
}
|
|
Lorenzo Orlando Caum
|
April 15, 2015 at 2:59 pm
Thanks. The following CSS should work:
#espresso_calendar .thumb-wrap,
.ui-tooltip-content p {
display: block;
}
#espresso_calendar .fc-event {
min-height: 3em;
max-height: 3em;
}
Here is a preview of how it should appear:
http://cl.ly/image/2W1I1H2t2p2I
—
Lorenzo
|
|
Delilah Martinez
|
April 15, 2015 at 3:18 pm
mobile looks fine but now the desktop view is messed up.
see below
http://vippaints.com/sandiego/san-diego-calendar/
|
|
Lorenzo Orlando Caum
|
April 15, 2015 at 3:24 pm
Hi,
We can introduce a media query so it applies only to smaller screens. Try this instead:
(AT)media only screen and (max-width: 767px) {
#espresso_calendar .thumb-wrap,
.ui-tooltip-content p {
display: block;
}
#espresso_calendar .fc-event {
min-height: 3em;
max-height: 3em;
}
}
Note: it should replace the existing custom CSS that you recently added.
Change (AT) in the example above to the @ symbol.
—
Lorenzo
|
