[honeydarko]

Hiya,

Sure thing. If you look at this post:
http://www.honeydarko.com/introduction-brush-calligraphy-101/?preview_id=624&preview_nonce=59e764ecfb&_thumbnail_id=-1&preview=true

At the bottom, you will see a vertically long image (the last image in the post). That is supposed to be hidden and the following is the code pasted in the post:

<div style="”display: none;"></div>

According to all the tutorials, this is the only thing that they do and it works but for some reason, in our case, the image is still there.

Thanks again

[honeydarko]

When clicking a Pin-it button, the reader gets a new window pop-up with all images available in the post (invisible ones as well). He/she will then choose the one that they want to pin. The image we want to hide will come up as one of the first images, so the "pinner" will naturally lean towards choosing that one. It is not necessary to pin an image that was originally visible in the post, as the hidden image was specifically created for Pinterest.

Pinterest images tend to naturally be very high vertically, hence do not look good in a blog post, hence people choose to hide them. They still need to be somewhere in the post (hidden in this case) for the Pin-it button to offer them as Pinterest image options.

You can read more about it here:

https://bloguettes.com/hide-pinnable-image-blog-posts/

[honeydarko]

Thanks a bunch

[honeydarko]

Super, thank you so much for the help

[honeydarko]

Hi, I tried doing that, but nothing happened.

By using the link that you gave me, I tried to figure out what the white colour comes from and it seems to be connected to the body, meaning the header area, the sides and the last part of the footer.

Do you have any idea on how to fix this?

[honeydarko]

You can view the white space on the image attached above. Basically where it says copyright etc, the area is white.

CSS:
Footer Widgets
---------------------------------------------------------------------------------------------------- */

.footer-widgets {
background: #ffd9ad;
display: block;
clear: both;
overflow: hidden;
padding: 0 0 37px;
}

.footer-widgets .wrap,
.footer-widgets-1,
.footer-widgets-4 {
max-width: 1400px;
width: 100%;
}

.footer-widgets-2,
.footer-widgets-3 {
float: left;
margin-left: 2.564102564102564%;
padding: 27px 77px;
width: 48.717948717948715%;
}

.footer-widgets-2 {
margin-left: 0;
}

.footer-widgets-2 {
float: left;
}

.footer-widgets-3 {
float: right;
}

.footer-widgets .widget {
margin-bottom: 22px;
}

.footer-widgets .widgettitle {
}

.footer-widgets li {
list-style-type: none;
margin-bottom: 6px;
word-wrap: break-word;
}

.footer-widgets .search-form {
width: 100%;
}

.footer-widgets .search-form input:focus {
border: 1px solid #eee;
}

.footer-widgets img {
margin: 0;
}

.footer-widgets .featured-content,
.footer-widgets .featuredpost {
background: transparent;
max-width: 95%;
}

.footer-widgets .entry {
background: #ffd9ad;
padding: 5px;
}

/*
Site Footer
---------------------------------------------------------------------------------------------------- */

.site-footer {
color: #aaa;
font-size: 9px;
letter-spacing: 2px;
padding: 27px 0;
text-align: center;
text-transform: uppercase;
}

.site-footer a {
color: #aaa;
text-decoration: none;
}

.site-footer p {
margin: 0;
}

/*

[honeydarko]

Is this the correct way because it still doesnt work:

Site Header
----------------------------------------------------------------------------- */

.site-header {
background-position: center;
padding: 20px 0;
}

.site-header .wrap {
padding: 17px 0;
}

/* Title Area
--------------------------------------------- */

.title-area {
display: inline-block;
margin: 0;
padding: 17px 0;
max-width: 100%;
}

.header-image .site-description {
line-height: 0;
}

.header-image .title-area {
max-width:100%;
}

.site-title {
font-size: 37px;
font-weight: 600;
letter-spacing: 2px;
line-height: 0.8;
margin: 17px 0;
text-transform: uppercase;
}

.site-title a {
color: #010101;
font-style: normal;
background-position: center !important;
}

.site-title a:hover,
.site-title a:focus {
color: #010101;
}

.site-description {
color: #aaa;
font-family: "Muli", Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: 300;
letter-spacing: .5px;
margin: 0;
text-transform: none;
}

/* Full width header, no widgets */
.header-full-width .title-area,
.header-full-width .site-title {
text-align: center;
max-width: 100%;
}

.header-image .site-description,

/* Logo, hide text */
.header-image .site-title > a {

}

.header-image .site-header {

}

.header-image .site-title a {

}

[honeydarko]

Thank you for your answer. But nothing happens even if I do that. I tried to clean out a bit and this is what I have now:

Site Header
----------------------------------------------------------------------------- */

.site-header {
background-position: center;
padding: 20px 0;
}

.site-header .wrap {
padding: 17px 0;
}

/* Title Area
--------------------------------------------- */

.title-area {
display: inline-block;
margin: 0;
padding: 17px 0;
}

.header-image .site-description {
line-height: 0;
}

.header-image .title-area {
width:100%;
}

.site-title {
font-size: 37px;
font-weight: 600;
letter-spacing: 2px;
line-height: 0.8;
margin: 17px 0;
text-transform: uppercase;
}

.site-title a {
color: #010101;
font-style: normal;
}

.site-title a:hover,
.site-title a:focus {
color: #010101;
}

.site-description {
color: #aaa;
font-family: "Muli", Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: 300;
letter-spacing: .5px;
margin: 0;
text-transform: none;
}

/* Full width header, no widgets */
.header-full-width .title-area,
.header-full-width .site-title {
text-align: center;
width: 100%;
}

.header-image .site-description,

/* Logo, hide text */
.header-image .site-title > a {

}

.header-image .site-header {

}

.header-image .site-title a {

background-position: center !important;
}

[Author]

Posts