Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Removing CSS on One Page Only


StoriedCorey

Question

Site URL: https://www.debbiemarkswellness.com/

Hi, All. I created some Custom CSS to underline h1 sitewide, but that code is being pulled to my blog (I think) which is why I have this strange line underneath my blog post titles. Do you have any idea how to remove this faint gray line on just my blog posts? 

 

SITE: debbiemarkswellness

PW: BEWELL

Page: https://www.debbiemarkswellness.com/blog/you-have-it-all

Screen Shot 2020-11-30 at 9.51.11 AM.png

Link to comment

4 answers to this question

Recommended Posts

  • 1

@StoriedCorey

Gotcha - thanks for the code snippet info.

One option would be to use #(page name) ahead of h1 tag to either add current css per page or, alternatively, hide it

 

 

With ❤️, from Andrew @ SQSDesign
Need help building and maintaining your website?

That's all we do: custom blocks, fully-styled templates, product management, POD fulfillment, and more.
Reach out anytime, 24/7/365: 
📱
(628) SQS-DSGN • ✉️ Email • 👀 Instagram • 🚀 RocketSurgery Blog •  🔲 @SQSDesign

Link to comment
  • 0

Hi @StoriedCorey,

It depends on which way you created (or didn't create) the line.

If you just used an H1 tag for site wide or if it's a default, vestigal hyperlink text-dec, then you may instruct the CSS to hide the underline using and be done with it:

.BlogItem-Title h1 {text-decoration: none !important}

That code should target it. Otherwise, feel free to reach out,

SQSDesign

With ❤️, from Andrew @ SQSDesign
Need help building and maintaining your website?

That's all we do: custom blocks, fully-styled templates, product management, POD fulfillment, and more.
Reach out anytime, 24/7/365: 
📱
(628) SQS-DSGN • ✉️ Email • 👀 Instagram • 🚀 RocketSurgery Blog •  🔲 @SQSDesign

Link to comment
  • 0

I didn't actually create an underline, @SQSDesign. Here is the code I'm using to place a short line beneath my page headings: 

h1 {
  position: relative;
&:after {
    content: '';
    position: absolute;
    bottom: 0;
    height: 3px;
    width: 50px;
    left: 0;
    background: #EEEEEE;
    -webkit-transform: translateY(15px);
       -ms-transform: translateY(15px);
           transform: translateY(15px);
}
&[style*="text-align:center"]:after {
    margin: 0 auto;
    right: 0;
}
&[style*="text-align:right"]:after {
    right: 0;
    left: auto;
}
}

 

I just don't want to apply this to my blog titles which also happen to be h1.

Link to comment
  • 0

Thanks for the suggestion, @SQSDesign! I'm not familiar with page names/how to find them/how to apply code to specific pages, but I took your concept of applying the code snippet to select content and found the ID's for the 5 blocks on my website that use this styling and applied the css to those five blocks. Worked like a charm. Thanks for the help!

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