Jump to content

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

Go to solution Solved by thewolvesdenvisualco,

Recommended Posts

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

IMG_7078.png

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

IMG_7078.png

 

Can you share the code that you was added?

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

Link to comment

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;
}

 

Link to comment
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;
}

 

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

Link to comment
Just now, thewolvesdenvisualco said:

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

Screenshot 2023-08-24 154322.png

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

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

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

Link to comment
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;
}



}

 

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

Link to comment
  • Solution

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

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.