Image in a header is clipping to the title of my blog. Any ideas how to remove?

thewolvesdenvisualco · August 24, 2023

Hello,

I am definitely a rookie when it comes to web coding, but I think I’ve managed myself pretty well at this point.

Previously I had added code to make my header a image, and that’s been great, but now I’m trying to start up a blog page, but in the Title a part of that same image used in the header is now clipped under the title of my blog post.

Any one have any idea on how to fix this?

Screenshot posted below and link to blog can be found here. https://www.kevinplumley.com/blog

Web_Solutions · August 24, 2023

13 minutes ago, thewolvesdenvisualco said:

Hello,

I am definitely a rookie when it comes to web coding, but I think I’ve managed myself pretty well at this point.

Previously I had added code to make my header a image, and that’s been great, but now I’m trying to start up a blog page, but in the Title a part of that same image used in the header is now clipped under the title of my blog post.

Any one have any idea on how to fix this?

Screenshot posted below and link to blog can be found here. https://www.kevinplumley.com/blog

Can you share the code that you was added?

thewolvesdenvisualco · August 24, 2023

Forgive me if I'm mistaken, but here is the code I'm using that would affect my header.

.view-list .banner-thumbnail-wrapper, .collection-type-page .banner-thumbnail-wrapper, .collection-type-index .banner-thumbnail-wrapper
{
height: 100%;
width: 100%;

overflow: clip;

}




#siteWrapper {
background-color: #000000 ; /* make this your darkest color */
background-image: linear-gradient(#ffffff,#ffffff,#BABABA);
}

header{
 background-size: cover;
   width: 200px;
  height: 200px;
  
  background-position: center top 0px;
  
 background-color:transparent!important;
  
background-image:url(https://static1.squarespace.com/static/533494a4e4b0d765125378e0/t/63eb64875435a502cffda7e8/1676371086864/headerv2.png)!important;
  
  background-repeat: no-repeat;
}

Web_Solutions · August 24, 2023

12 minutes ago, thewolvesdenvisualco said:

Forgive me if I'm mistaken, but here is the code I'm using that would affect my header.

.view-list .banner-thumbnail-wrapper, .collection-type-page .banner-thumbnail-wrapper, .collection-type-index .banner-thumbnail-wrapper
{
height: 100%;
width: 100%;

overflow: clip;

}




#siteWrapper {
background-color: #000000 ; /* make this your darkest color */
background-image: linear-gradient(#ffffff,#ffffff,#BABABA);
}

header{
 background-size: cover;
   width: 200px;
  height: 200px;
  
  background-position: center top 0px;
  
 background-color:transparent!important;
  
background-image:url(https://static1.squarespace.com/static/533494a4e4b0d765125378e0/t/63eb64875435a502cffda7e8/1676371086864/headerv2.png)!important;
  
  background-repeat: no-repeat;
}

Replace the code with the code below.

.view-list .banner-thumbnail-wrapper, .collection-type-page .banner-thumbnail-wrapper, .collection-type-index .banner-thumbnail-wrapper {
  height: 100%;
  width: 100%;
  overflow: clip;
}

#siteWrapper {
  background-color: #000000 ; /* make this your darkest color */
  background-image: linear-gradient(#ffffff,#ffffff,#BABABA);
}

header#header {
  background-size: cover;
  width: 200px;
  height: 200px;
  background-position: center top 0px;
  background-color:transparent!important;
  background-image:url(https://static1.squarespace.com/static/533494a4e4b0d765125378e0/t/63eb64875435a502cffda7e8/1676371086864/headerv2.png)!important;
  background-repeat: no-repeat;
}

thewolvesdenvisualco · August 24, 2023

that seemed to have fixed the issue with the blog, but it now made my header shrink significantly

Web_Solutions · August 24, 2023

Just now, thewolvesdenvisualco said:

that seemed to have fixed the issue with the blog, but it now made my header shrink significantly

I think you have made mistake on the CSS code. Can you share all the code on Custom CSS section?

thewolvesdenvisualco · August 24, 2023

.view-list .banner-thumbnail-wrapper, .collection-type-page .banner-thumbnail-wrapper, .collection-type-index .banner-thumbnail-wrapper
{
height: 100%;
width: 100%;

overflow: clip;

}

//subtitle//

#block-yui_3_17_2_1_1676622874538_32976
{
h3 {
color: #9B0000;
font-family: proxima nova;
font-weight: 400;
font-size: 20px;
}
}

#block-191dfa1409541257bcdc
{
header{
display: none;}
}

//FONT & HEADINGS//
@font-face {font-family: 'Olondon2';
src: url(https://static1.squarespace.com/static/533494a4e4b0d765125378e0/t/63eb8f3ebb72d96ab4819c79/1676382014756/Olondon2.otf)}

@font-face {font-family: 'IMFellDWPica-Regular';
src: url(https://static1.squarespace.com/static/533494a4e4b0d765125378e0/t/64be11b41c33165ca943dcb2/1690177972344/IMFellDWPica-Regular.ttf); }

@font-face {font-family: 'IMFellDWPica-Italic';
src: url(https://static1.squarespace.com/static/533494a4e4b0d765125378e0/t/64be11ac011e0221bc2202e5/1690177964773/IMFellDWPica-Italic.ttf);}

#has-site-title site-title { font-family: "Olondon2"; }

h4 {
color: black;
font-family: Bebas Neue;
font-weight: 400;
font-size: 100px;
}

h5 {
color: red;
font-family: proxima nova;
font-weight: 400;
font-size: 50px;
}

//TWD VC Page//

#block-yui_3_17_2_1_1688779912129_19305
{
header{
display: none;}
}

#block-yui_3_17_2_1_1690173102104_56674
{font-size: 14px;}

#block-yui_3_17_2_1_1690175254307_13409
{
header{display: none;}

h1 { color: #FFE9B3;
font-size: 70px;
font-family: "IMFellDWPica-Regular";}

background-color: #000000;
height: 90px;
position: center;
}

#block-yui_3_17_2_1_1688785183211_4040
{
header{
display: none;}
}

#block-yui_3_17_2_1_1690173102104_38061

header{
display: none;}

//Header & Footer//

#siteWrapper {
background-color: #000000 ; /* make this your darkest color */
background-image: linear-gradient(#ffffff,#ffffff,#BABABA);
}

header{
background-size: cover;
width: 200px;
height: 200px;

background-position: center top 0px;

background-color:transparent!important;

background-image:url(https://static1.squarespace.com/static/533494a4e4b0d765125378e0/t/63eb64875435a502cffda7e8/1676371086864/headerv2.png)!important;

background-repeat: no-repeat;
}

footer{background-size: cover;
width: -200px;
height: 370px;

background-position: center top -0px;

background-color:transparent!important;

background-image:url(https://static1.squarespace.com/static/533494a4e4b0d765125378e0/t/63eb63369723a241feceaa40/1676370750758/footerv2.png)!important;

background-repeat: no-repeat;
}

prefooter {
height: 01px; /* adjust the height to your desired size */
padding: 0px;}

//Graphic Design Blocks//
//Index Block//
#collection-63ee49462e985d0e53894342
{ width: 100%;
height: auto;
}

#collection-63ee2a5506fcdf43537835da
h1{
text-decoration: underline overline black;
color: #9B0000;
}

//4k
@media screen and (max-width: 3840px) {
//For 4K Displays (Ultra HD)

header{
background-size: cover;
width: 200px;
height: 400px;

background-position: center top 0px;

background-color:transparent!important;

background-image:url(https://static1.squarespace.com/static/533494a4e4b0d765125378e0/t/63eb64875435a502cffda7e8/1676371086864/headerv2.png)!important;

background-repeat: no-repeat;
}

footer{background-size: cover;
width: -200px;
height: 370px;

background-position: center top -0px;

background-color:transparent!important;

background-image:url(https://static1.squarespace.com/static/533494a4e4b0d765125378e0/t/63eb63369723a241feceaa40/1676370750758/footerv2.png)!important;

background-repeat: no-repeat;
}



}

Of Course, Forgive me if this is very sloppy and suboptimal

Web_Solutions · August 24, 2023

20 minutes ago, thewolvesdenvisualco said:

.view-list .banner-thumbnail-wrapper, .collection-type-page .banner-thumbnail-wrapper, .collection-type-index .banner-thumbnail-wrapper
{
height: 100%;
width: 100%;

overflow: clip;

}

//subtitle//

#block-yui_3_17_2_1_1676622874538_32976
{
h3 {
color: #9B0000;
font-family: proxima nova;
font-weight: 400;
font-size: 20px;
}
}

#block-191dfa1409541257bcdc
{
header{
display: none;}
}

//FONT & HEADINGS//
@font-face {font-family: 'Olondon2';
src: url(https://static1.squarespace.com/static/533494a4e4b0d765125378e0/t/63eb8f3ebb72d96ab4819c79/1676382014756/Olondon2.otf)}

@font-face {font-family: 'IMFellDWPica-Regular';
src: url(https://static1.squarespace.com/static/533494a4e4b0d765125378e0/t/64be11b41c33165ca943dcb2/1690177972344/IMFellDWPica-Regular.ttf); }

@font-face {font-family: 'IMFellDWPica-Italic';
src: url(https://static1.squarespace.com/static/533494a4e4b0d765125378e0/t/64be11ac011e0221bc2202e5/1690177964773/IMFellDWPica-Italic.ttf);}

#has-site-title site-title { font-family: "Olondon2"; }

h4 {
color: black;
font-family: Bebas Neue;
font-weight: 400;
font-size: 100px;
}

h5 {
color: red;
font-family: proxima nova;
font-weight: 400;
font-size: 50px;
}

//TWD VC Page//

#block-yui_3_17_2_1_1688779912129_19305
{
header{
display: none;}
}

#block-yui_3_17_2_1_1690173102104_56674
{font-size: 14px;}

#block-yui_3_17_2_1_1690175254307_13409
{
header{display: none;}

h1 { color: #FFE9B3;
font-size: 70px;
font-family: "IMFellDWPica-Regular";}

background-color: #000000;
height: 90px;
position: center;
}

#block-yui_3_17_2_1_1688785183211_4040
{
header{
display: none;}
}

#block-yui_3_17_2_1_1690173102104_38061

header{
display: none;}

//Header & Footer//

#siteWrapper {
background-color: #000000 ; /* make this your darkest color */
background-image: linear-gradient(#ffffff,#ffffff,#BABABA);
}

header{
background-size: cover;
width: 200px;
height: 200px;

background-position: center top 0px;

background-color:transparent!important;

background-image:url(https://static1.squarespace.com/static/533494a4e4b0d765125378e0/t/63eb64875435a502cffda7e8/1676371086864/headerv2.png)!important;

background-repeat: no-repeat;
}

footer{background-size: cover;
width: -200px;
height: 370px;

background-position: center top -0px;

background-color:transparent!important;

background-image:url(https://static1.squarespace.com/static/533494a4e4b0d765125378e0/t/63eb63369723a241feceaa40/1676370750758/footerv2.png)!important;

background-repeat: no-repeat;
}

prefooter {
height: 01px; /* adjust the height to your desired size */
padding: 0px;}

//Graphic Design Blocks//
//Index Block//
#collection-63ee49462e985d0e53894342
{ width: 100%;
height: auto;
}

#collection-63ee2a5506fcdf43537835da
h1{
text-decoration: underline overline black;
color: #9B0000;
}

//4k
@media screen and (max-width: 3840px) {
//For 4K Displays (Ultra HD)

header{
background-size: cover;
width: 200px;
height: 400px;

background-position: center top 0px;

background-color:transparent!important;

background-image:url(https://static1.squarespace.com/static/533494a4e4b0d765125378e0/t/63eb64875435a502cffda7e8/1676371086864/headerv2.png)!important;

background-repeat: no-repeat;
}

footer{background-size: cover;
width: -200px;
height: 370px;

background-position: center top -0px;

background-color:transparent!important;

background-image:url(https://static1.squarespace.com/static/533494a4e4b0d765125378e0/t/63eb63369723a241feceaa40/1676370750758/footerv2.png)!important;

background-repeat: no-repeat;
}



}

Of Course, Forgive me if this is very sloppy and suboptimal

Replace code with the code below

.view-list .banner-thumbnail-wrapper, .collection-type-page .banner-thumbnail-wrapper, .collection-type-index .banner-thumbnail-wrapper
{
height: 100%;
width: 100%;

overflow: clip;

}

//subtitle//

#block-yui_3_17_2_1_1676622874538_32976
{
h3 {
color: #9B0000;
font-family: proxima nova;
font-weight: 400;
font-size: 20px;
}
}

#block-191dfa1409541257bcdc
{
header{
display: none;}
}

//FONT & HEADINGS//
@font-face {font-family: 'Olondon2';
src: url(https://static1.squarespace.com/static/533494a4e4b0d765125378e0/t/63eb8f3ebb72d96ab4819c79/1676382014756/Olondon2.otf)}

@font-face {font-family: 'IMFellDWPica-Regular';
src: url(https://static1.squarespace.com/static/533494a4e4b0d765125378e0/t/64be11b41c33165ca943dcb2/1690177972344/IMFellDWPica-Regular.ttf); }

@font-face {font-family: 'IMFellDWPica-Italic';
src: url(https://static1.squarespace.com/static/533494a4e4b0d765125378e0/t/64be11ac011e0221bc2202e5/1690177964773/IMFellDWPica-Italic.ttf);}

#has-site-title site-title { font-family: "Olondon2"; }

h4 {
color: black;
font-family: Bebas Neue;
font-weight: 400;
font-size: 100px;
}

h5 {
color: red;
font-family: proxima nova;
font-weight: 400;
font-size: 50px;
}

//TWD VC Page//

#block-yui_3_17_2_1_1688779912129_19305
{
header{
display: none;}
}

#block-yui_3_17_2_1_1690173102104_56674
{font-size: 14px;}

#block-yui_3_17_2_1_1690175254307_13409
{
header{display: none;}

h1 { color: #FFE9B3;
font-size: 70px;
font-family: "IMFellDWPica-Regular";}

background-color: #000000;
height: 90px;
position: center;
}

#block-yui_3_17_2_1_1688785183211_4040
{
header{
display: none;}
}

#block-yui_3_17_2_1_1690173102104_38061

header{
display: none;}

//Header & Footer//

#siteWrapper {
background-color: #000000 ; /* make this your darkest color */
background-image: linear-gradient(#ffffff,#ffffff,#BABABA);
}

header#header{
background-size: cover;
width: 200px;
height: 200px;

background-position: center top 0px;

background-color:transparent!important;

background-image:url(https://static1.squarespace.com/static/533494a4e4b0d765125378e0/t/63eb64875435a502cffda7e8/1676371086864/headerv2.png)!important;

background-repeat: no-repeat;
}

footer{background-size: cover;
width: -200px;
height: 370px;

background-position: center top -0px;

background-color:transparent!important;

background-image:url(https://static1.squarespace.com/static/533494a4e4b0d765125378e0/t/63eb63369723a241feceaa40/1676370750758/footerv2.png)!important;

background-repeat: no-repeat;
}

prefooter {
height: 01px; /* adjust the height to your desired size */
padding: 0px;}

//Graphic Design Blocks//
//Index Block//
#collection-63ee49462e985d0e53894342
{ width: 100%;
height: auto;
}

#collection-63ee2a5506fcdf43537835da
h1{
text-decoration: underline overline black;
color: #9B0000;
}

//4k
@media screen and (max-width: 3840px) {
//For 4K Displays (Ultra HD)

header#header{
background-size: cover;
width: 200px;
height: 400px;

background-position: center top 0px;

background-color:transparent!important;

background-image:url(https://static1.squarespace.com/static/533494a4e4b0d765125378e0/t/63eb64875435a502cffda7e8/1676371086864/headerv2.png)!important;

background-repeat: no-repeat;
}

footer{background-size: cover;
width: -200px;
height: 370px;

background-position: center top -0px;

background-color:transparent!important;

background-image:url(https://static1.squarespace.com/static/533494a4e4b0d765125378e0/t/63eb63369723a241feceaa40/1676370750758/footerv2.png)!important;

background-repeat: no-repeat;
}



}

thewolvesdenvisualco · August 24, 2023

I gave that a try and I ended up getting the same result as original code you provided but thank you for taking a look!

i added a image for a banner and it moved the title to the new image but still leaves that little tab with my graphic so I’m not sure if it’s a issue with .banner or something else

thewolvesdenvisualco · August 26, 2023

After some tinkering, I ended up figuring it out!

I at least wanted to post a follow-up for any future users experiencing similar issues.

So what I did to fix this was go into Advanced>Blog Post Item Code Injection and make the following changes to the code.

<style>
 
  .entry-header {display: contents;}
  
  .entry-footer {display: contents;}
  
</style>

It took a lot of time in Inspect Element to trace why the header image was being forced into each blog post and what class the image was directly affecting but I got it.

In a previous attempt, I had the display set to hidden instead and while that did hide the image I used as a header, it also hid metadata such as likes, tags, author, and title, so I don't recommend that unless that is your intention.

Just as a quick recap, I am using Squarespace 7.0 with the Bradford template. My Original code was fine (although admittedly suboptimal and amateur.)

Image in a header is clipping to the title of my blog. Any ideas how to remove?

Recommended Posts

thewolvesdenvisualco

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

Web_Solutions

Web_Solutions

Posted Images

Web_Solutions

thewolvesdenvisualco

Web_Solutions

thewolvesdenvisualco

Web_Solutions

thewolvesdenvisualco

Web_Solutions

thewolvesdenvisualco

thewolvesdenvisualco

Create an account or sign in to comment

Web_Solutions

Web_Solutions

Circle Benefits

Events

Circle Day

Resources

Product Updates

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources