topic Re: Portfolio Instant Apps -Custom CSS in ArcGIS Instant Apps Questions

Portfolio Instant Apps -Custom CSS

SayenaMarandi — Wed, 07 Jun 2023 17:31:05 GMT

I want to use the Custom CSS for ArcGIS online Instant Apps Portfolio . How to change the size of the application font ?

Re: Portfolio Instant Apps -Custom CSS

KellyHutchins — Wed, 07 Jun 2023 21:19:15 GMT

You could try something like this - but there are a few spots where it probably won't apply the new font size and you'll have to add more rules. This assumes you want all the fonts to be larger:

:root{
font-size:larger !Important;
}

You'll most likely have to modify the font in a few places here are some examples of increasing the font size for the item cards and the bottom panel title

:root{
--calcite-font-size--2: 1.5rem;
}

.esri-portfolio__body--carousel .esri-portfolio-carousel{
font-size:1.4em;
}

Re: Portfolio Instant Apps -Custom CSS

SayenaMarandi — Wed, 07 Jun 2023 23:56:24 GMT

Thank you for your response. I used your CSS code but I didn't see any changes after I publish the application and launched it again . My App layout is Tabbed and I want to increase the font size for the section names.

Re: Portfolio Instant Apps -Custom CSS

KellyHutchins — Thu, 08 Jun 2023 00:37:45 GMT

Give this a try for the tabbed section names:

.esri-portfolio-tabbed-item__title-info-container .esri-portfolio-tabbed-item__item-title{
font-size:24px;
}