Hello, I am trying to set up breakpoints in my theme.json. I’m doing this in order to change the properties of my template sections based on screen-size. However, I can’t set any breakpoint names besides “mobile”, and I’m only allowed to use this once.
Can’t use unique breakpoint names
Need unique breakpoint names
Example issue: I need my section to have different vertical padding on large screens, small screens, tablets, and mobile devices. I want this to be editable at the page editor level, so I don’t have to make different section templates every time I need different padding for a section.
I would like to be able to use section templates in my theme, but without the ability to edit them based on responsive breakpoints, they won’t be able to generate modern, responsive pages.
Hi, @GAlvarez75. Thanks for your question. I’d like to invite some of our community members to the conversation — @rlopez @GRajput, do you have any suggestions for @GAlvarez75?
Best,
Jaycee
Hi @GAlvarez75
Currently, HubSpot only has 2 breakpoints, Desktop and mobile. For your vertical padding, you can create fields in your field.json or specify those settings in your modules. You can refer to this doc for more info on breakpoints.
I hope this will help you out. Please mark it as Solution Accepted and upvote to help another Community member.
Thanks!
Hi Gaurav, thanks for your reply! I’d love to hear more about creating fields in field.json, if you have some documentation? Maybe that would be a good solution.
For setting section styles within modules, I’m not sure how I would scale that - could you walk me through how this would be accomplished in the example issue I provided?
Example issue: I need my section to have different vertical padding on large screens, small screens, tablets, and mobile devices. I want this to be editable at the page editor level, so I don’t have to make different section templates every time I need different padding for a section.
Hi @GAlvarez75
Here is the documentation for the theme fields. You can create these fields in fields.json and they will appear in your Theme Settings.
I hope this will help you out. Please mark it as Solution Accepted and upvote to help another Community member.
Thanks!
@GRajput thanks for sharing the documentation. I’m a little confused though - I need to be able to set properties, based on responsive breakpoints, at the section level - Different sections will need different properties at different breakpoints.
Example: I have a logo carousel section that I want to assign 50px vertical padding at a viewport width of 767px. I have a text section that I want to assign 100px vertical padding at a viewport width of 767px. Two unique values, for one property, at one responsive breakpoint.
If I set breakpoint fields at the theme level, wouldn’t all sections change in exactly the same way?
Sections are not an editable component in drag and drop development so you can’t add extra fields to it.
You’d have to create a custom module with padding fields for all the breakpoints you want, use JavaScript to determine what section the module has been added to (since CSS doesn’t have parent scoping), and then apply CSS to the section based on the edited fields. Honestly, if you want spacing options that customizable you’d be better off creating full-width modules that act as sections rather than styling Sections at all.
There’s been several Idea posts posted to the forum in the past couple years asking for more customizablity of Sections but we’ve yet to see any updates of such.
Hi Alyssa, thanks very much for your candid answer. I did end up finding the section tool more trouble than it was worth, and went back to full width modules just as you said.
