Hi, good day to everyone, this is my first post and im kinda new in development with Hubspot, i would kindly like to ask you if there is some way to remove this !important rules on some default modules because i would like to set my own in mobile devices, but even if i aply a super specific css with my !important rules to those tags, is still under those !important default rules, I can solve it by putting a rich text field and put my own html for something more specific but i would like to know if thats like a correct way or is there another way to do it better, thank you in advice!
Hi @GoldJack, welcome to the Community!
Could you please tell us more about what you are trying to achieve? What type of module are you adding and what’s the end goal? Are you using drag & drop? Are you editing any module properties that might affect the styles? Do you maybe have a link to that page?
Those !important styles seem very specific, so it might be either because you are manually editing some values via the editor or some of your Theme CSS files have some default values and you would need to edit those.
If you send us a link it will be easier for the Community members to debug the issue.
Hi albert thank you for answering. The theme im using is the Boilerplate and ive been adjusting some things for my requirements, sadly because of the matter of my workplace i cant show you the website because im not allow to publish it until its done. I have the “heading” default hubspot module, its an H1. i’ve set the styles in the drag n drop builder
ive tried to look inside the boilerplate theme to check whats causing it but im not able to identify the problem correctly.
What im trying to archive it to be able to change the font-size (or one of those properties from the builder) in mobile devices by code because builder doesnt let me:
I also know i can duplicate the heading and put the styles i want there and do some hide/show with the builder funtion but i didnt want to add extra code for only a font-size but if thats the way it works then its fine i just wanted to know if setting the styles in the builder always comes with those !importants or it may be a thing only inside this theme that someone did before i started working on this site, thank you again for taking your time to answer, im kinda new with hubspot so sorry if this is something i should already know or its something very very basic.
Hi @GoldJack, apologies for my delay answering you, busy week!
Thanks for the detailed explanation! Based on what you are saying and what I see, those !important are added because of the style properties you are adding to the module.
To edit the styles on mobile, you can do two things:
1- On the editor, select the mobile view and change your styles. Then use the preview to see if the different styles have been applied to mobile.
2- If the above doesn’t work because you don’t see the mobile, you might want to go to the theme.json file in your Theme and add the following property which should enable the mobile editor on your pages.
Let me know if that works!