Jump to content

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

Go to solution Solved by paul2009,

Recommended Posts

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!

Link to comment
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.

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
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?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
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.

Link to comment

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

Kindly check again on your Css stysle

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • Solution
14 hours ago, ElMarketer said:

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

On Squarespace, headings use h1 to h4 tags, but there aren't p1 to p3 tags for paragraphs. Instead, all paragraphs use a standard p tag that can be combined with classnames, as explained below:

 

Paragraph 2

Standard paragraphs (described as Paragraph 2 on the toolbar) use a <p> tag like this:

<p class="">Paragraph 2</p>

To style them, you can use CSS to target the p tag like this example to set the color:

p {
  color:red;
}

This may target just the "Paragraph 2" style of paragraph or all paragraphs, depending on the other CSS being used.

 

Paragraph 1

Larger paragraphs (described as Paragraph 1) also use the <p> tag but they do so in combination with the sqsrte-large class, as shown below. The class name is an abbreviation of "Squarespace Rich Text Editor - Large".

<p class="sqsrte-large">Paragraph 1</p>

 You can style them by using CSS to target the p tag and the sqsrte-large class like this example:

p.sqsrte-large {
  color:green;
}

 

 Paragraph 3

Finally, smaller paragraphs described as Paragraph 3 also use the <p> tag in combination with the sqsrte-small class, as shown below:

<p class="sqsrte-small">Paragraph 3</p>

You can style them by targeting the p tag and the sqsrte-small class like this:

p.sqsrte-small {
  color:blue;
}

Was this post helpful? Please give feedback by clicking an icon below  ⬇️

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.