CMS Development

italoborges
Participant

Few questions about responsive

SOLVE

Hi, I'm new in HubSpot, did the course and now I'm starting a project for my company.

 

About responsive behavior, I have some questions about it:

- Fonts, Do I need to create breakpoints when I need to change the font size depending on the screen size? Or is there something out of the box?

- Images, is there a way to change an image based in the screen size? I have an image with 1200px for example, it's a cover. In smaller devices, I would like to show another image to the user, how can I achieve that inside HubSpot?

0 Upvotes
1 Accepted solution
JasonRosa
Solution
HubSpot Employee
HubSpot Employee

Few questions about responsive

SOLVE

@italoborges welcome to HubSpot! 

 

To answer your first question about fonts, yes you'd need to add some breakpoints in your stylesheet if you wanted to change the font sizes as your page gets smaller. If you're using a HubSpot built template or a template from the marketplace this is likely built into the style-sheet already but if you're starting from scratch you'll need to build those in there. 

 

For your second scenario, it depends on how you're setting the image. You could add two images and set one to be display none until a certain breakpoint, and then switch the display none to the desktop image and set the mobile image to display block. 

View solution in original post

0 Upvotes
1 Reply 1
JasonRosa
Solution
HubSpot Employee
HubSpot Employee

Few questions about responsive

SOLVE

@italoborges welcome to HubSpot! 

 

To answer your first question about fonts, yes you'd need to add some breakpoints in your stylesheet if you wanted to change the font sizes as your page gets smaller. If you're using a HubSpot built template or a template from the marketplace this is likely built into the style-sheet already but if you're starting from scratch you'll need to build those in there. 

 

For your second scenario, it depends on how you're setting the image. You could add two images and set one to be display none until a certain breakpoint, and then switch the display none to the desktop image and set the mobile image to display block. 

0 Upvotes