Hi @alan1950
Thanks for reaching out!
First, the theme you use can have a small influence on how things are displayed.
In your case the difference comes from that on your live site the container for the calendar is not wide enough and responsiveness kicks in. So you are seeing the mobile resolution version of the list view on your live site, not the full desktop version.
Screenshot: https://dl.dropbox.com/s/m7aumktq9lbrqmf/shot_210312_145456.jpg
Desktop version would look like this:
https://dl.dropbox.com/s/ct87gboi672zkwn/shot_210312_145412.jpg
Try the setting under Events > Settings > Display tab > Events template > Default Events Template and see if that helps make it full width. Currently that container is 70% wide. My hunch is because it would expect the widgets show up on the right side.
Cheers,
Andras
Hi Andras, thank you for your reply.
The issue I’m having is with the front page of the test subdomain (in the right sidebar). The URL is test dot spectrumstriders dot org dot uk
The front page of the live ‘www’ site is displaying the events beautifully.
The settings are the same for both the test subdomain and for the live site.
I can confirm that the ” Default Events Template ” was already selected however I confirmed by saving the settings again.
The settings for the sidebar (on both sites) are:
container width = 1160px
content width = 70%
sidebar width = 25%
I have moved back to the Zakra theme now (which allows me to adjust the sidebar width) but when I activated Twenty Twenty-one theme, the sidebar was moved to the footer but the events calendar still displayed the same (incorrect) formatting.
Many thanks
Alan
Hi,
Issue not really solved, I really liked the day number appearing largeer and bold. Cannot see any differences between test and live site, I assume that there is some plugin clash somewhere.
I’ve settled for putting this into additional CSS:
.widget-area h2 {
font-size: 24px;
}
.widget-area h3 {
font-size: 16px;
margin 0px 0px 0px 0px;
}
.widget-area a {
font-size: 16px;
font-weight: normal;
margin 0px 0px 0px 0px;
color: Blue;
}
.widget-area div {
font-size: 16px;
margin 0px 0px 0px 0px;
color: Black;
font-weight: bold;
}