0

Flow Break Points

331 0 6
Posted   6 months ago

Looking to add some custom CSS at the different break points. What are the breakpoints in flow for medium, small and extra small screen sizes?

Thanks!

 

Comments

( 0 )

Answers  ( 6 )

0
avatar Luke Hickey   |    
Posted   6 months ago

Flow sizes are the same as defined in Bootstrap 3.x. Majority of our responsive/css framework leverages Bootstrap / JQuery. Our CSS compiler is based on less.

What kind of things are you trying to do at breakpoints that aren't already supported in Flow? 

We have built in actions / triggers to do things at the built in BPs. 

We also have built in BP features to control text sizes @, show/hide @, margin size @ and swap/change content @ all within the Selection Control Bar or Selection Bar. 
 

Comments

( 0 )
0
avatar Chris Van Wingerden   |    
Posted   6 months ago

To save you from searching, Bootstrap 3.x specifies these widths for its breakpoints, which we also use in Flow:

  • Extra small - less than 768px
  • Small -768px and up
  • Medium - 992px
  • Large -  1200px

Comments

( 0 )
0
avatar redmondd   |    
Posted   6 months ago

Thanks to you both! Just looking to make it easier to bulk change font sizes for headers and body text at the different break points. For example, when my regular body text size is 18px:

 

@media screen and (max-width: 992px) {

   p {

     font-size: 16px;

    }

  }

Comments

( 0 )
0
avatar Luke Hickey   |    
Posted   6 months ago

In our Theme Designer, under the Typography section, you can set the base font size and then to the right you can specify by how much to increase or decrease size at the smaller BP. 
 

See the attached sim for how to create a new theme to try it yourself. Step 3 shows the section with Typography, click edit to see the options for font and size.

 

Comments

( 0 )
0
avatar redmondd   |    
Posted   5 months ago
  ●   Edited   5 months ago

Thanks Luke. As far as I can tell there, you can only set the decrease in size for extra small screen size only. I'm looking to also decrease at the 'small' screen size.

The below css word perfectly, where my regular font size is 18px.

@media screen and (max-width: 992px) {
  body {
    font-size: 16px;
  }
}

 

Comments

( 2 )
0
5 months ago     Luke Hickey     231   |   4  

Have you looked at the Change At option, that lets you alter text at different sizes too. You can define a course style to set the font and then apply it at the desired sizes. I’ll post an answer with a link to the hide/change at feature.

0
5 months ago     redmondd     21   |   4  

Yeah, I'm aware of Change At, however that would be one by one on each textbox. Was just trying to change all egular body font size starting at the small screen size. It's easy enough with the media query, just needed to know the breakpoint.

0
avatar Luke Hickey   |    
Posted   5 months ago

I could find a specific article on Change At but I found the Hide At, similar principle. 

at step 3 in the Capture, see the Change At button to the right of Hide At. Use that option to see how it works. Depending on what element you select on the page the options for Change At will be different. In your case for text you'll have options to change the style or edit the text. Recommend changing the style so you can centrally manage if you decide to change it later. 
 

Comments

( 0 )