Custom CSS
Last updated
Last updated
Good to know: Design Packs is built by developers for developers 💻. We want to make your life easier 👍
Custom CSS styles for desktop and mobile separately in customizer scope to each pack individually
All of the styles that you add are scoped to that specific section (which means you can style two Design Packs totally differently and not have to worry about any interfering styles or inheritance issues)
To select the entire section, use empty brackets, instead of using the id selector (eg. #DP--12344789 is not needed). Not sure what that means? Here is an example:
If you copy and paste the above code, you will see a border appear around the section. It will be a solid line, 3 pixels in width and the color red.
Sometimes you might want to have margins on the top, but not the bottom of a section, or vice versa. To override the margins in the settings you can use the following code:
Include both of these lines of code if you want to change both the top and bottom margins. If you only want to change one of the margins, then you can delete the one you don't need.
One "gotcha" is that the margin will show up again on mobile, so in order to make sure that a margin is consistent on all screen sizes, you can add the same code in Mobile CSS OR add !important to the end of each (example below):
We have set a default speed of 0.5s for elements to animate in when that section comes into view on page scroll. Sometimes that can seem slow if you have a lot of blocks that are animating in. To adjust this, you can use the following CSS:
^^ The value can be updated to 0.1s, 0.2s, 0.3s, 0.4s, etc. If you want to apply that animation speed to ALL the animations (instead of one section), you can add the following code to the Global Custom CSS in the app interface.
All of the font sizes in Design Packs are controlled by CSS variables, so you can update the size of text depending on the screen size. Copy and paste the following code into the Mobile CSS and change the values to see the font size adjust. These pixel sizes will grow or shrink based on how large you have set the size with the "Text size" slider.
--dp-heading-size will affect all of the larger h1, h2 headings (default size is 35px) --dp-small-heading-size will affect the smaller headings such as h3, h4, h5, h6 (default size is 24px) --dp-body-size will affect paragraphs, buttons, product titles, etc (default size is 18px)
If you would prefer to hardcode the font size (it will NOT change when the "Text size" setting changes, then use the following code and update the pixel values to your preferred numbers.
To hide a section on mobile, add the following code only into the Mobile CSS field:
To hide a section on desktop and show on mobile, add the following code into the CSS field:
And then add the following code into the Mobile CSS field:
General custom CSS add globally to theme or all Design Packs
Banner sections are full width by default, but if do not want them to stretch across the whole screen, you can use the following CSS snippet to control the width. This snippet doesn't use a class (eg. .dsgn-pck__sizer) because it is applied to the parent element.
hello
Here's a little example of how to use CSS to create a stylish comparison chart using the . CSS code included in the comments of the video.
