change mobile display | PenciDesign Support

FreakMike replied

4 years ago

Customer Reply

Thank you !

PenciDesign Supporter replied

4 years ago

Staff Reply

Hi,

Here is the CSS code change the font family on Event Calendar:

.tribe-compatibility-container h3 a {
    font-family: "Mukta Vaani";
    text-decoration: none;
    border: 0;
}

Regards,
PenciDesign.

FreakMike replied

4 years ago

Customer Reply

So i have to change this part of the code ?

.tribe-compatibility-container h3 a {
    text-decoration: none;
    border: 0;
}
.tribe-common .tribe-common-anchor-thin:hover,
.tribe-compatibility-container a:hover {
    color: #8224e3;
    border: 0 !important
}

Because when I change or erase this part nothing change.

i just need the next show to use the same font as the rest of the titles.

PenciDesign Supporter replied

4 years ago

Staff Reply

Hi,

I've checked your site, all the codes display properly as the screenshot below:

At this time, the PenNews theme doesn't support this event calendar plugin, if you want to highly customize, you need to modify the code I've sent you.

Regards,
PenciDesign.

FreakMike replied

4 years ago

Customer Reply

Hello,

the first part seems to work :

.tribe-compatibility-container {
    padding: 15px;
    margin-top: 30px;
    background-color: #fff;
}

But not the rest

PenciDesign Supporter replied

4 years ago

Staff Reply

Hi,

Please go to Appearance → Customize → Custom CSS then add the following custom CSS code:

.tribe-compatibility-container {
    padding: 15px;
    margin-top: 30px;
    background-color: #fff;
}
.tribe-compatibility-container h3 a {
    text-decoration: none;
    border: 0;
}
.tribe-common .tribe-common-anchor-thin:hover,
.tribe-compatibility-container a:hover {
    color: #8224e3;
    border: 0 !important
}

Regards,
PenciDesign.

FreakMike replied

4 years ago

Customer Reply

Works perfectly !! Thank you so mush.

I am using the event calendar on my site but the widget does not integrate with the theme. Is it possible to make it visually identical to the rest of the theme? (Font, color background)

PenciDesign Supporter replied

4 years ago

Staff Reply

Hi,

1. Please add more CSS:

@media only screen and (min-width: 480px){
    .penci-block_6.penci-vc-column-2 .penci-post-item:nth-last-child(2) {
        margin-bottom: 20px;
        border-bottom: 1px solid #ececec;
    }
    .penci-block_6.penci-vc-column-2 .penci-post-item:nth-last-child(2) .penci_media_object {
        margin-bottom: 20px;
    }
}

2. Use this CSS to show the review in 2 columns on mobile:

@media only screen and (max-width: 650px) {
    .penci-content-main .penci-block_14 .penci-post-item,
    .penci-content-main .penci-block_18 .penci-post-item {
        width: 50%;
        margin-top: 0;
        margin-bottom: 20px;
    }
    .penci-content-main .penci-block_14 .penci-post-item:nth-child(2),
    .penci-content-main .penci-block_14 .penci-post-item:nth-child(3),
    .penci-content-main .penci-block_18 .penci-post-item:nth-child(2),
    .penci-content-main .penci-block_18 .penci-post-item:nth-child(3) {
        margin-top: 0;
    }
}

Regards,
PenciDesign.

FreakMike started the conversation

4 years ago

Conversation Start

Hello,

my site is online now and I come back with a few questions.

1/ I added the css code you gave me for the pencil 6 but now in desktop display there is a small bug on the last posted post.

@media screen and (min-width: 480px) {
.penci-block_6.penci-vc-column-2 .penci-post-item { width: 100%; float: left; margin-right: 0; }
}

2/ For my review page i use the pencil 14, can I display two columns in mobile display rather than one? I find the display too big for the mobile display (Same thing for my home page and the pencil 18 that I use to display the last reviews)

Thank you