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.

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, 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?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, 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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, 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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, 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  ⬇️

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

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.