Can I apply different font-size to the title of the PC page and mobile page?

Posted in: Newspaper
Post count: 41

I want to apply 36px to the title of post when visit by PC,and apply 28px to the same title of the post when visit by mobile,how can I do that please?
Thanks.

Post count: 35449

Hi,

Using TD Composer that will be very easy just take a look at this example:
For desktop/px: https://www.screencast.com/t/SAFcdXJml
For mobile : https://www.screencast.com/t/Jkyq8kRlsx

You can read more about TD Composer in this documentation: https://forum.tagdiv.com/tagdiv-composer-tutorial/

Thank you.

Post count: 41

Thank you,but I need to apply to all the titles of the post,not to the special block or module,it seems to have to change the setting of the post template.
like the post:
https://nzlifenz.com/nz/8408
the title:新西兰总理Jacinda联合国抱娃四处吸睛,她要和川普对着干?

Post count: 20688

Hi,

That would be possible with the tagDiv composer. But you could also do that with some CSS in the Advanced CSS sections of the theme panel. In this example I used a code that will make the post title to have one size for desktop and a different one on mobile.
For example – https://www.screencast.com/t/FtI5BZBrz
https://www.screencast.com/t/KXe20qLZr
https://www.screencast.com/t/8V19sgOOn

With the browser inspector you can create the code and then enter it in the theme panel
https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/

Post count: 41

Thanks.
But I use the code for phone or ipad,but it doesn’t work.
.td-post-template-default .td-post-header .entry-title {
font-size: 24px;
font-weight: 600;
}
I think most of phone now exceed 1080px.

Post count: 20688

For phones enter it in the phones section and it will work. There are also sections for tablets you can use if you want to.

The code you mention will apply to posts that use the default post template.

Or you can create codes withe the media queries you want and enter them in the default Custom CSS section
https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Post count: 41

Thanks.
But I use the code for phone or ipad,but it doesn’t work.
.td-post-template-default .td-post-header .entry-title {
font-size: 24px;
font-weight: 600;
}
Is my code correct?

Post count: 20688

Try it like this, seems the code needs more strength to apply

.td-post-template-default .td-post-header .entry-title {
font-size: 24px!important;
font-weight: 600;
}

Should work then – https://www.screencast.com/t/0AFmGuhPrI79

Viewing 8 posts - 1 through 8 (of 8 total)
The forum ‘Newspaper’ is closed to new topics and replies.