size of images & fonts

Hi there,

Thanks for using Mission News!

The following CSS can address the first two customizations:

/* Increase preview image size on mobile */
@media all and (max-width: 899px) {
	.layout-rows .rows .featured-image, .layout-rows .rows-excerpt .featured-image, .layout-rows-excerpt .rows .featured-image, .layout-rows-excerpt .rows-excerpt .featured-image {
		width: 100%;
		padding-bottom: 60%;
		margin-bottom: 6px;
	}
}
/* Increase font size of post titles */
.layout-rows .rows .post-title, .layout-rows .rows-excerpt .post-title, .layout-rows-excerpt .rows .post-title, .layout-rows-excerpt .rows-excerpt .post-title {
	font-size: 1.1em;
}

As for decreasing the word count, there isn’t a way to do this with just CSS. Are you looking to use different post titles on the homepage VS the post page? Or do you just want to truncate the title so it looks something like this: “This is a Post title and…”

Hi, thanks for your amazing support.

yes, i would like to decrease the amount of characters on home page ,

also the second part of your css code increases things? I would like to decrease size(s)

2. How to decrease the article titles font size on homepage home titles

I added the css : `* Increase preview image size on mobile */
@media all and (max-width: 899px) {
.layout-rows .rows .featured-image, .layout-rows .rows-excerpt .featured-image, .layout-rows-excerpt .rows .featured-image, .layout-rows-excerpt .rows-excerpt .featured-image {
width: 100%;
padding-bottom: 60%;
margin-bottom: 6px;

it did increased the image size but it caused the titles to display beneath the image instead of adjacent to the image. So, can I just increase the image size in mobile by 10% and still have the title display next to the image?

Got it. Here is an update to the CSS that will make the Featured Images a bit bigger and keep the titles next to them, while also making those titles smaller.

@media all and (max-width: 899px) {
	.layout-rows .rows .featured-image, .layout-rows .rows-excerpt .featured-image, .layout-rows-excerpt .rows .featured-image, .layout-rows-excerpt .rows-excerpt .featured-image {
		width: 40%;
		padding-bottom: 24%;
	}
	.layout-rows .rows.has-post-thumbnail .post-header, .layout-rows .rows-excerpt.has-post-thumbnail .post-header, .layout-rows-excerpt .rows.has-post-thumbnail .post-header, .layout-rows-excerpt .rows-excerpt.has-post-thumbnail .post-header {
		width: calc(60% - 17px);
	}
}

As for changing the post titles on the homepage, I took a look into this, but it’s much more complicated than I expected. I’m afraid this is outside the scope of support I can offer. Instead, I’d recommend checking for a plugin. There may be a free plugin available that lets you change post titles on the archive pages.

the 17px in the code is the size of font in mobile?

the amount of words in title are too many in mobile if the … could be added as customization at some point that would be amazing, thanks for looking into it.

• This reply was modified 2 years, 1 month ago by bluesky2.

I’ll see what I can do with that feature.

I accidentally left out the font size code when pasting here. Please add this code to make the post titles smaller on mobile:

@media all and (max-width: 899px) {
  .layout-rows .rows .post-title, .layout-rows .rows-excerpt .post-title, .layout-rows-excerpt .rows .post-title, .layout-rows-excerpt .rows-excerpt .post-title {
    font-size: 18px;
  }
}

You can adjust the 18px value there to increase/decrease the size to your liking.