Multiple breakpoints, hubspot default code, and !important

[SBurnett28]

I'm having some trouble trying to implement breakpoints other than mobile at 768px. I can add breakpoints and the code I need for it, but I'm having a problem with the hubspot injected CSS that I can't seem to edit myself. So when I write my own code for the dnd-containers, it gets overwritten when I use certain options, mostly just the "vertical alignment" option. The reason this is a problem is because having a certain number of modules in one row (in this instance 3 images and 3 text boxes) when the screen is sized down, it doesn't break where I would ideally want it to and it leads to very squished text for a few sizes until it switches to mobile layout.

Basically I want to stop this: 

I only want the alignment on the actual container itself, not the module/dnd-column. So it would be:

[class*=vertical-alignment] > .row-fluid {

align-items: center;

}

Rather than:

cell-vertical-alignment {

display: flex;

flex-direction: column;

justify-content: center;

}

If there's a compelling reason for why it's set up like this, I'd like to know so I can begin to appreciate it. Otherwise I don't understand why, when the setting it selected on the entire row, is the alignment foisted onto the column rather than the row as a whole.

I'd like to continue to use the dnd system and circumvent this or somehow work with it. I tried adding my own code like the above, but because the hubspot code has !important on it, I can't overwrite it. I also tried using custom coded templates with no wrappers, but that is not super time efficient especially when the goal is for non-developers to be able to easily add/remove modules etc. I don't want to have to make a template for every possible page variation in existance, so I want to use the dnd system but alter it to be more my style.

[SBurnett28]

Hi there,

That doesn't answer or solve the issue of needing a separate breakpoint in between mobile and desktop. That would just change the mobile breakpoint to be earlier would it not? I am asking if it's possible to prevent the default HubSpot behaviour from adding display: flex to things I don't want it on. It seems to be added from outsite the layout.css.

[webdew]

Hi @SBurnett28 ,

1. Make this below changes in your theme.json
   
   

2. Now for mobile view wherever you want change write media query in your css
@media(max-width:767px){
//Write your css here

}

Hope this helps!

If we were able to answer your query, kindly help the community by marking it as a solution.

Thanks and Regards.