Override a theme setting at a lower breakpoint?

Helpdesk Website Builder
1

I’m a convert from webflow - I’m loving SiteJet, but I’m a little confused on something…

Let’s say you have text element font size defined in the theme as 16px. The text works well for desktop, but wraps on tablet view. How do I define the text element font size to say 14px at the tablet size?

Thanks!

1 Like
2

Hi! Theme settings can be adjusted per device breakpoint.

Here is a video (no audio) showing how it works.

2 Likes
3

Hmmm…ok…I was playing with that but not getting the expected results - I’ll have another try at it - thank you!

1 Like
4

Hi! If you want to target sepcific elements and have different properties on different breakpoints you can create a class (assign that class to your element) and make use of media queries.

Example

//MY awesome class 
.my-class {
	font-size: 16px;
    //Change the size under tablet
	@media screen and (max-width: $breakpoint-md-max) {
		font-size: 14px;
		//other properties can be here
	}
}

More about media queries: Responsive Web Design Media Queries

2 Likes
5

Ok - was just hoping this could be done in the user interface - you can change some of these things in the themes for different breakpoints, so I thought you could also do it for custom classes…(you can in Webflow)…I’m finding there are pros and cons between platforms…

1 Like