Responsive font size

[Caito124]

Hi there,

I have a few web pages used the template 'Add On Subscriptions Customer Hosted' which were downloaded from the Marketplace template called 'Starter Kit Pricing'. I'm having trouble with the font size in the pricing boxes adjusting to screen size - I'd like the font to decrease when the window size decreases. The boxes adjust, but the fonts don't. I'm not fluent in CSS - what code do I need to make sure is there? Attached is what the page looks like currently when I decrease window size.

Thanks!

[JasonRosa]

Hey @Caito124 if there is an issue with a module/template that you purchased from the marketplace it is best to reach out to the marketplace provider as providers are responsible for supporting the templates/modules that they have listed in the marketplace. You can get the provider's information by going to your portal > Marketing (top menu) > Files and Templates > Template Marketplace > Purchased (tab at the top of the page) > click on the downloaded item that you're seeing issues with. There should be an "Email Support" option in the sidebar on the right. 

If you wanted someone in the community to take a look, please provide a live link to the page that you're working on so that we can inspect the code for you and provide you with some feedback. 

[Caito124]

Thanks @JasonRosa! I've reached out the the template vendor's support but they are pretty unresponsive.

And sorry for not linking to the page! Duh. Here you go:

https://www.datacor.com/additional-subscriptions-vb-cust 

Thanks in advance!

Caitlin

[JasonRosa]

Hey @Caito124 based on the way things are built out (it looks like each of those sections are rich text modules and the code in them is not consistent) it would require a bit of CSS/HTML knowledge for a fix so I would still advise pushing back on the provider if you could for support if you're not familiar with CSS yourself. You'd basically need to add in some CSS to your style-sheet to target that module based on your screen size. To do that you'd need to use media queries (helpful link here). It looks like most of your issues are happening between ~1100 pixels in width and ~767px in width so a media query like this would be what you were looking for: 

@media (max-width: 1100px) and (min-width: 767px) {

  .price h2 {

      font-size: 24px;

  }

}

In the example above this will change the h2s (which look to be set for the headers) within elements with the class of "price" which looks to be added on each of those pricing modules so it will effectively target the price number in each of those sections.