Custom CSS classes for media Query + flex

[cedson]

Builder content link

Builder.io: Drag & Drop Headless CMS

Builder public api key
22d7e777310243139ed9f12ba85d84f0

What are you trying to accomplish
I want to create media queries in a custom CSS class. How do I go about doing that without having to manually change every time within the visual editor? Screenshot shown, which didn’t work.

I also want to make the columns have align-self: center, and justify-content: center CSS attributes apply to columns. Currently, those CSS attributes don’t work and I have to use the visual editor to apply those myself. For example, I want to make a column have align-self & justify-center both have content so any boxes I put in there, will be centered within each column. Currently, I went in and made the box ‘center vertically’ to make it align. Is there a way to add the flex features on the parent ‘div’ to make all children divs inside the column do that, or is the easy fix to just apply a class to the box within the column and make it center vertically using CSS?

Screenshots or video link
Screenshot below

Code stack you are integrating Builder with
Angular

[nicke920]

Hi Charley,

Thanks for reaching out!

1. Would you be able to explain more the first point How do I go about doing that without having to manually change every time within the visual editor? You should be able to use media queries to add CSS to various elements at different breakpoints, instead of using the visual editor button to toggle through mobile/tablet/desktop viewpoints then updating styles in the style tab.
2. You should be able to add flex features to any div via the CSS Properties tab in the Visual Editor. In Flexbox, sometimes the container shrinks to the size of the elements inside and thus centering doesn’t work. Here’s a great StackOverflow article below about centering vertically/horizontally. Take a look at approach #2 to see if the way you have it set up is any different

[cedson]

Hi @nicke920,

1. Currently, I am using specific styles in each of the 3 breakpoints: desktop, tablet, and mobile. My current workflow is one of two. First, I pick the breakpoint (desktop) and create the styles for that. Then I choose a different breakpoint (tablet or mobile) and design the styles for that. This way is a little repetitive and I’d like to instead, use custom CSS classes for custom breakpoints that I define. I have an example in the screenshots. The CSS class is ‘productitlesubheading’. As you can see I created a media query for that. When I went to test it(look on the visual editor and changed the breakpoint, and also on the preview page and changed the sizing, the styling didn’t work on the specified breakpoint. Am I using CSS incorrectly or is there another way? We also are using angular, and it doesn’t appear that it is one of the SDK’s that supports custom breakpoints. The breakpoints I used to test was max-width: 1199px and mid-width: 768px. Could this be causing the custom CSS I’m using to not work?

Again, here is an example of the code:

producttitlesubheading {
    margin-bottom: 8px;
    font-size: 36px;
    font-weight: 600;
    line-height: 48px;

}

@media only screen and (max-width: 1199px) and (mid-width: 768px) {
    .producttitlesubheading {
        font-size: 24px;
        font-weight: 600;
        line-height: 32px;
}
}

2. The flex features work perfectly when making the selections from the style tab. When I get it to look like I want, I can then copy those properties from the CSS tab into my custom CSS code. However, those properties are different than the StackOverflow article referenced. For demonstration. below is what the current visual is, using the approach mentioned in the stackoverflow article: It contains the code, and then a screenshot of visual. The custom CSS is applied to the column box. As you can see, both boxes within the column box are behaving unexpectedly. It’s almost as if I shouldn’t use a column box, and just use regular boxes within a larger container box to achieve this affect, and not the builder column div.

.productcolumncontainer {
    display: flex;
    flex-direction: column;
    column-gap: 1000px;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 1294px;
    padding: 0px 24px 0px 24px;
    margin: 0 auto 42px auto;
    height: 100%;
}

[cedson]

@nicke920 Hey Nick, still curious if you had any answers? Please let me know if my follow up details were enough.

[nicke920]

Hey Charlie,

Regarding 1, I’m not quite sure that mid-width is a thing in CSS media query which is the reason why this media query is not working. Would you be meaning min-width? Meaning this query will run only when screen width is between 768px and 1199px.

Regarding 2, if you are using the Columns block in Builder, you shouldn’t need to add extra CSS to make the columns work, they should align as is. It appears that you were doubling up the CSS of adding flexbox inside flexbox which was causing your design issue. I took a look at your space, and it looks like you removed the custom CSS and the 1/3 | 2/3 columns are working now: Loom | Free Screen & Video Recording Software | Loom

[cedson]

1- yes, I was hoping to institute a media query where it would only work between 768px and 1199px. For now, I’m using builders default. However, we are using angular and in reading the documentation, it appears as if it isn’t supported so that may answer that questions.