Responsive text

goalsarecool · June 26, 2017, 8:30pm

PRO question: Is there a way to automatically make all text responsive?

Thanks!

Blake

rubin · June 27, 2017, 11:30am

Hi There,

You can use a media query to universally target all text, or you can use the built in responsive text functionality of the content builder for the body text. And set the header/footer text to a media query.

Thanks!

goalsarecool · June 27, 2017, 2:25pm

Thanks Rubin! Can you please tell me the CSS for the media query that universally targets all text?

Thanks again!

Blake

https://goalsarecool.com/

Jack · June 27, 2017, 3:25pm

Hi there Blake,

You can find all breakpoints for media queries here: https://responsivedesign.is/develop/browser-feature-support/media-queries-for-common-device-breakpoints/

You’d need to then set in the media query the font size with the target, such as:

h1 {
font-size: 20px;
}

within the media query itself.

Thanks!

goalsarecool · June 27, 2017, 3:50pm

Is this what I would need to put into Customizer ==> Custom CSS?

/* Smartphones (portrait and landscape) ----------- /
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/ Styles */
p {
font-size: 16px;
}

h1 {
font-size: 54px;
}

H2 {
font-size: 36px;
}

H3 {
font-size: 24px;
}

H4 {
font-size: 22px;
}

H5 {
font-size: 18px;
}

H6 {
font-size: 22px;
}
}

/* Smartphones (landscape) ----------- /
@media only screen and (min-width : 321px) {
/ Styles */
p {
font-size: 16px;
}

h1 {
font-size: 54px;
}

H2 {
font-size: 36px;
}

H3 {
font-size: 24px;
}

H4 {
font-size: 22px;
}

H5 {
font-size: 18px;
}

H6 {
font-size: 22px;
}
}

/* Smartphones (portrait) ----------- /
@media only screen and (max-width : 320px) {
/ Styles */
p {
font-size: 16px;
}

h1 {
font-size: 54px;
}

H2 {
font-size: 36px;
}

H3 {
font-size: 24px;
}

H4 {
font-size: 22px;
}

H5 {
font-size: 18px;
}

H6 {
font-size: 22px;
}
}

/* iPads (portrait and landscape) ----------- /
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/ Styles */
p {
font-size: 16px;
}

h1 {
font-size: 54px;
}

H2 {
font-size: 36px;
}

H3 {
font-size: 24px;
}

H4 {
font-size: 22px;
}

H5 {
font-size: 18px;
}

H6 {
font-size: 22px;
}
}

/* iPads (landscape) ----------- /
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/ Styles */
p {
font-size: 16px;
}

h1 {
font-size: 54px;
}

H2 {
font-size: 36px;
}

H3 {
font-size: 24px;
}

H4 {
font-size: 22px;
}

H5 {
font-size: 18px;
}

H6 {
font-size: 22px;
}
}

/* iPads (portrait) ----------- /
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/ Styles */
p {
font-size: 16px;
}

h1 {
font-size: 54px;
}

H2 {
font-size: 36px;
}

H3 {
font-size: 24px;
}

H4 {
font-size: 22px;
}

H5 {
font-size: 18px;
}

H6 {
font-size: 22px;
}
}

/**********
iPad 3
*********/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/ Styles */
p {
font-size: 16px;
}

h1 {
font-size: 54px;
}

H2 {
font-size: 36px;
}

H3 {
font-size: 24px;
}

H4 {
font-size: 22px;
}

H5 {
font-size: 18px;
}

H6 {
font-size: 22px;
}
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
p {
font-size: 16px;
}

h1 {
font-size: 54px;
}

H2 {
font-size: 36px;
}

H3 {
font-size: 24px;
}

H4 {
font-size: 22px;
}

H5 {
font-size: 18px;
}

H6 {
font-size: 22px;
}
}

/* Desktops and laptops ----------- /
@media only screen and (min-width : 1224px) {
/ Styles */
p {
font-size: 16px;
}

h1 {
font-size: 54px;
}

H2 {
font-size: 36px;
}

H3 {
font-size: 24px;
}

H4 {
font-size: 22px;
}

H5 {
font-size: 18px;
}

H6 {
font-size: 22px;
}
}

/* Large screens ----------- /
@media only screen and (min-width : 1824px) {
/ Styles */
p {
font-size: 16px;
}

h1 {
font-size: 54px;
}

H2 {
font-size: 36px;
}

H3 {
font-size: 24px;
}

H4 {
font-size: 22px;
}

H5 {
font-size: 18px;
}

H6 {
font-size: 22px;
}
}

/* iPhone 4 ----------- /
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/ Styles */
p {
font-size: 16px;
}

h1 {
font-size: 54px;
}

H2 {
font-size: 36px;
}

H3 {
font-size: 24px;
}

H4 {
font-size: 22px;
}

H5 {
font-size: 18px;
}

H6 {
font-size: 22px;
}
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
p {
font-size: 16px;
}

h1 {
font-size: 54px;
}

H2 {
font-size: 36px;
}

H3 {
font-size: 24px;
}

H4 {
font-size: 22px;
}

H5 {
font-size: 18px;
}

H6 {
font-size: 22px;
}
}

/* iPhone 5 ----------- /
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/ Styles */
p {
font-size: 16px;
}

h1 {
font-size: 54px;
}

H2 {
font-size: 36px;
}

H3 {
font-size: 24px;
}

H4 {
font-size: 22px;
}

H5 {
font-size: 18px;
}

H6 {
font-size: 22px;
}
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
p {
font-size: 16px;
}

h1 {
font-size: 54px;
}

H2 {
font-size: 36px;
}

H3 {
font-size: 24px;
}

H4 {
font-size: 22px;
}

H5 {
font-size: 18px;
}

H6 {
font-size: 22px;
}
}

/* iPhone 6 ----------- /
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/ Styles */
p {
font-size: 16px;
}

h1 {
font-size: 54px;
}

H2 {
font-size: 36px;
}

H3 {
font-size: 24px;
}

H4 {
font-size: 22px;
}

H5 {
font-size: 18px;
}

H6 {
font-size: 22px;
}
}

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
p {
font-size: 16px;
}

h1 {
font-size: 54px;
}

H2 {
font-size: 36px;
}

H3 {
font-size: 24px;
}

H4 {
font-size: 22px;
}

H5 {
font-size: 18px;
}

H6 {
font-size: 22px;
}
}

/* iPhone 6+ ----------- /
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/ Styles */
p {
font-size: 16px;
}

h1 {
font-size: 54px;
}

H2 {
font-size: 36px;
}

H3 {
font-size: 24px;
}

H4 {
font-size: 22px;
}

H5 {
font-size: 18px;
}

H6 {
font-size: 22px;
}
}

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
p {
font-size: 16px;
}

h1 {
font-size: 54px;
}

H2 {
font-size: 36px;
}

H3 {
font-size: 24px;
}

H4 {
font-size: 22px;
}

H5 {
font-size: 18px;
}

H6 {
font-size: 22px;
}
}

/* Samsung Galaxy S3 ----------- /
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/ Styles */
p {
font-size: 16px;
}

h1 {
font-size: 54px;
}

H2 {
font-size: 36px;
}

H3 {
font-size: 24px;
}

H4 {
font-size: 22px;
}

H5 {
font-size: 18px;
}

H6 {
font-size: 22px;
}
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
p {
font-size: 16px;
}

h1 {
font-size: 54px;
}

H2 {
font-size: 36px;
}

H3 {
font-size: 24px;
}

H4 {
font-size: 22px;
}

H5 {
font-size: 18px;
}

H6 {
font-size: 22px;
}
}

/* Samsung Galaxy S4 ----------- /
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/ Styles */
p {
font-size: 16px;
}

h1 {
font-size: 54px;
}

H2 {
font-size: 36px;
}

H3 {
font-size: 24px;
}

H4 {
font-size: 22px;
}

H5 {
font-size: 18px;
}

H6 {
font-size: 22px;
}
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
p {
font-size: 16px;
}

h1 {
font-size: 54px;
}

H2 {
font-size: 36px;
}

H3 {
font-size: 24px;
}

H4 {
font-size: 22px;
}

H5 {
font-size: 18px;
}

H6 {
font-size: 22px;
}
}

/* Samsung Galaxy S5 ----------- /
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/ Styles */
p {
font-size: 16px;
}

h1 {
font-size: 54px;
}

H2 {
font-size: 36px;
}

H3 {
font-size: 24px;
}

H4 {
font-size: 22px;
}

H5 {
font-size: 18px;
}

H6 {
font-size: 22px;
}
}

@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
p {
font-size: 16px;
}

h1 {
font-size: 54px;
}

H2 {
font-size: 36px;
}

H3 {
font-size: 24px;
}

H4 {
font-size: 22px;
}

H5 {
font-size: 18px;
}

H6 {
font-size: 22px;
}
}

christian · June 28, 2017, 12:30pm

Yes, that is correct.

system · July 8, 2017, 12:30pm

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.