Okay
  Public Ticket #3580853
Change font size
Closed

Comments

  •  2
    Abril Castro started the conversation
    February 9, 2024 at 4:58am

    Hello, I need to change the design of the calendar, I need the font size and buttons to be larger.

    I tried to edit the styles on the aditional css section but nothing happens.

    Attached files:  Screen Shot 2024-02-08 at 10.56.31 PM.png

  •  877
    Zhivko replied
    February 9, 2024 at 4:40pm

    Hi,

    Here's css example that will change the event preview container for desktop, tablet and mobile screen sizes:

    /* Desktop */
/* Title */
.stec:not(.mobile):not(.tablet) .stec-event-preview-content-title { 
    font-size: 26px !important;
    font-weight: 700 !important;
}
/* Text below the title */
.stec:not(.mobile):not(.tablet) .stec-event-preview-content-secondary stec-span {
    font-size: 18px !important;
}
/* Right side buttons */
.stec:not(.mobile):not(.tablet) .stec-event-preview-aside i { 
    font-size: 28px !important; 
}
.stec:not(.mobile):not(.tablet) .stec-event-preview-aside .stec-button {
    font-size: 24px !important;
    padding: 12px 16px !important;
    height: auto !important;
}

    /* Tablet */
/* Title */
.tablet .stec-event-preview-content-title { 
    font-size: 20px !important;
    font-weight: 700 !important;
}
/* Text below the title */
.tablet .stec-event-preview-content-secondary stec-span {
    font-size: 16px !important;
}
/* Right side buttons */
.tablet .stec-event-preview-aside i { 
    font-size: 22px !important; 
}
.tablet .stec-event-preview-aside .stec-button {
    font-size: 16px !important;
    padding: 4px 16px !important;
    height: auto !important;
}
    /* Mobile */
/* Title */
.mobile .stec-event-preview-content-title { 
    font-size: 18px !important;
    font-weight: 700 !important;
}
/* Text below the title */
.mobile .stec-event-preview-content-secondary stec-span {
    font-size: 14px !important;
}
/* Right side buttons */
.mobile .stec-event-preview-aside i { 
    font-size: 20px !important; 
}
/* Tickets and Rsvp Buttons */
.mobile .stec-event-preview-aside-rsvp.small,
.mobile .stec-event-preview-aside-tickets.small  {
    font-size: 18px !important;
    padding: 4px 12px !important;
    height: auto !important;
}

    Stachethemes Developer

  •  2
    Abril Castro replied
    February 9, 2024 at 8:59pm

    Thanks for your answer, I copied and pasted the code on the Aditional css section but nothing happens. Should I paste it somewhere else?

  •  2
    Abril Castro replied
    February 9, 2024 at 9:29pm

    I correct myself, the css is working fine thank you.