how do you change paragraph 1,2,3 on mobile.

Hi- I'm trying to adjust my text sizes for XL Screens. The code I'm using works for Header text where I can assign specific sizes for h1 / h2 / h3 etc, but it doesn't work for Paragraph styles when I use p1 / p2 / p3. It works when I just use "p" and adjusts ALL paragraph styles, but I want to have different sizes for all paragraph styles. 

This code works:

@media screen and (min-width : 1824px) {
h1 {font-size:4rem !important}}

This does Not work:

@media screen and (min-width : 1824px) {
p2 {font-size:8rem !important}}

https://sailfish-tetra-wny5.squarespace.com/

PW: alexisalexis

Thank you for your help!

On 4/16/2022 at 12:27 AM, Ekin said:

Hi- I'm trying to adjust my text sizes for XL Screens. The code I'm using works for Header text where I can assign specific sizes for h1 / h2 / h3 etc, but it doesn't work for Paragraph styles when I use p1 / p2 / p3. It works when I just use "p" and adjusts ALL paragraph styles, but I want to have different sizes for all paragraph styles. 

This code works:

@media screen and (min-width : 1824px) {
h1 {font-size:4rem !important}}

This does Not work:

@media screen and (min-width : 1824px) {
p2 {font-size:8rem !important}}

https://sailfish-tetra-wny5.squarespace.com/

PW: alexisalexis

Thank you for your help!

HTML element p2 does not exist. Try using only p.

how do you change paragraph 1,2,3 on mobile.
I'm using:

"@media only screen and (max-width: 640px){ p {font-size:3.3vw}"

and it changes paragraph 2 only 

ive tried:

p1 {}
p2 {}
p3 {} 

but didn't work

how do you change paragraph 1,2,3 on mobile.
I'm using:

"@media only screen and (max-width: 640px)
{ p {font-size:3.3vw}"

and it changes paragraph 2 only 

ive tried:

p1 {}
p2 {}
p3 {} 

but didn't work

maybe a noobie question but I did my best searching.

cheers

25 minutes ago, ElMarketer said:

how do you change paragraph 1,2,3 on mobile.
I'm using:

"@media only screen and (max-width: 640px)
{ p {font-size:3.3vw}"

and it changes paragraph 2 only 

ive tried:

p1 {}
p2 {}
p3 {} 

but didn't work

maybe a noobie question but I did my best searching.

cheers

can you share your site with the side-wide password so I can take a look?

On 4/21/2022 at 1:29 AM, bangank36 said:

can you share your site with the side-wide password so I can take a look?

Hi Bangank, unfortunately it's a NDA project which limits me so much from getting help.

Ive added "!important;"

"@media only screen and (max-width: 640px)
{ p {font-size:3.3vw !important!}"

now p1, p2 & p3 are set to 3.3 vw

I'm trying to get an output like:
- P1 --> 3.3
- P2 --> 3.2
- P3 --> 3.1

Appreciate your time, Thanks.

p1,p2,p3 are not the standard element in HTML DOM

Kindly check again on your Css stysle

1 hour ago, bangank36 said:

Kindly check again on your Css stysle

I'm doing this in CSS editor, there's no edits in HTML only using squarespace styling for setting fonts

On 4/15/2022 at 7:27 PM, Ekin said:

doesn't work for Paragraph styles when I use p1 / p2 / p3. It works when I just use "p" and adjusts ALL paragraph styles, but I want to have different sizes for all paragraph styles. 

same problem. have you found a solution?

do p{} , p2{} , p3{} work with you in CSS?

if so are there any coding needed in HTML?

It requires the link to your site to check the element you want to set style indeed

Thanks so much Paul. this solved the problem.

P1

On 4/22/2022 at 6:24 PM, paul2009 said:

p.sqsrte-large {
  color:green;
}

P2

On 4/22/2022 at 6:24 PM, paul2009 said:

p {
  color:red;
}

P3
 

On 4/22/2022 at 6:24 PM, paul2009 said:

p.sqsrte-small {
  color:blue;
}