Jump to content

Changing format in one header block only

Recommended Posts

Hi All,

I have added an opaque background to all my H1 text to facilitate reading agains the images. I then added

display:inline-block       to size the backgrounds and 

position:relative; left:50%; transform: translateX(-50%)  to center it all

It is working well but I have an issue with my H1 in the home page as here I do not need it centered. How can I exclude all this formatting from this block? I can control it a bit in the desktop view but still it is not aligned and when browsing in mobile it centres the H1 text which spoils everything.

I hope someone can help

Thanks

Link to comment
  • Replies 8
  • Views 565
  • Created
  • Last Reply
48 minutes ago, D9NTE said:

Site URL: http://www.9diDANTE.com

Hi All,

I have added an opaque background to all my H1 text to facilitate reading agains the images. I then added

display:inline-block       to size the backgrounds and 

position:relative; left:50%; transform: translateX(-50%)  to center it all

It is working well but I have an issue with my H1 in the home page as here I do not need it centered. How can I exclude all this formatting from this block? I can control it a bit in the desktop view but still it is not aligned and when browsing in mobile it centres the H1 text which spoils everything.

I hope someone can help

Thanks

Exclude the h1 on that block using

#block-98132e6ac8f337d0051f .sqs-block-content h1 {
  text-align: left;
  position: static;
  transform: none;
  left: 2em;
}

image.png.dec9e2d6b8c0996527eaadf9ef69d54e.png

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
3 minutes ago, D9NTE said:

Thank you! You are a star

Is there a simple way to reduce the gap between line 1 and line 2 now?

#block-98132e6ac8f337d0051f .sqs-block-content h1 {
    text-align: left;
    position: relative;
    transform: none;
    left: 0;
    top: 0.5em;
}

Change the top value

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
8 minutes ago, D9NTE said:

One final question

Can I also remove the background color in this block?

 

Background: transparent

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
5 minutes ago, D9NTE said:

I hope that i am not exceeding myself with one more issue ...

When I scroll the home page on mobile, I get a shaking of the background images. Is there a way that you know of fixing this issue?

Pls open it as new topic, i got myself busy at the moment

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

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.