Blog Page looks distorted!

I have created a new Blog page https://gokutty.com/blog/ and also added couple of sample posts.

I have noticed my Blog Page is not formatted, don’t see search button, don’t see title fro the Blog page and all posts are distorted. All other Pages looks perfectly fine.

Please let me know how to make my Blog Page look similar to other pages.

Appreciate your help

Hi there,

Did you already set the widgets to the sidebar? I’ve tried to investigate your page and didn’t see any widgets in there.

Also, the title looks not good because you has this custom CSS code applied:

.hentry .title-post {
    color: white;
    margin-top: -64px;
}

Did you use the code correctly? if not, please remove the code instead.

Regards,

Yes. The code is correct. You can check in line 3 and 4 (.hentry .title-post
{color: white; margin-top: -64px;}) I works very well in all the other pages.

I did not set any widgets to the sidebar in my Blog Page. My Blog page is just a new page with default settings.

If I comment the code, the Blog page is formatted with no background colour. But the page title is still not visible. Refer to screen snapshot below:

Also, when the code is commented the title height in all the pages increases and the page title becomes in-visible. Refer to the screen snapshot below:

Hence, I have reverted the code back to active.

I also want to link my Blog Page with social media (i.e. Facebook, Twitter, LinkedIn, YouTube, Instagram etc). This integration should allow anything posted in social media should automatic share the post in my Blog Page. Anything posted in my Blog Page should automatically share in all the social media.

Appreciate, if you could provide the detailed resolution to fix my blog page https://gokutty.com/blog/.

Hi,

Your code is working for all pages. You need to make the code works only for a specific page only.
This sample below will only work for the homepage with blogs layout:

.home .hentry .title-post {
    color: white;
    margin-top: -64px;
}

And this for another specific page based on the page id:

.page-id-123 .hentry .title-post {
    color: white;
    margin-top: -64px;
}

You need to set the widgets if you want to show them in the sidebar.

Even, if i modify the code for a specific page, the Blog page still not complete. As you could see in the screen snapshot shared earlier the page title is not visible, the background colour is white, unable to show posts as summary, could not show categories etc.

I also want to link my Blog Page with social media (i.e. Facebook, Twitter, LinkedIn, YouTube, Instagram etc). This integration should allow anything posted in social media should automatic share the post in my Blog Page. Anything posted in my Blog Page should automatically share in all the social media.

Hi Sukar,

Looks like something happens with your website. Please check.

What’s the issue you are experiencing?

I am able to access my my Website https://GoKutty.com!

Yesterday your website showing the suspended message, but now I can access it as normal.

Regarding to your blog page issue, please try to add this:

body:not(blog) .hentry .title-post {
    margin-top: 0;
}
.single-post .entry-content {
    color: white;
}

And regarding your idea about auto-posting to social media, I will forward it to our developer team. It was such as a great idea by the way. Thank you.

Regards

When i use the proposed code, the formatting on blog page is fixed but the title on blog page is not seen and the background colour is not in consistent with other pages.

Also, this script increases the space above the title in all other pages. Hence, I commented the script.

Please uncomment the code and let me check further.

Okay. As requested, I have now commented the script. I have also copied below the complete “Additional CSS” script for your information.


.page .page-wrap .content-wrapper, .single .page-wrap .content-wrapper {background-color: transparent;}
.hentry .title-post{color: white; margin-top: -64px;}

/* Sudhakar: Remove formatting issues on Blog Page */
body:not(blog) .hentry .title-post {margin-top: 0;}
.single-post .entry-content {color: white;}

.panel-grid-cell .widget-title{text-transform: capitalize;}
form{color: white;}

.site-logo{max-height: 50px;}
.header-wrap{margin-top:40px;}

/* Sudhakar: Menu Settings for Mobile */
@media only screen and (max-width:1025px){
.header-wrap .container{text-align: left;}
.header-wrap .btn-menu{float: right; margin-right: 15px;}
.header-wrap .col-md-4 {max-width: 90%; position: relative; z-index: 2;}
.header-wrap .col-md-8 {margin-top: -50px;}
#mainnav-mobi {top: 70px;}
.site-header.fixed, .site-header.fixed.float-header{position: fixed !important;}
.sydney-hero-area{margin-top: 130px;}}

/* Sudhakar: Remove small line under title in widget */
.panel-grid-cell .widget-title:after{display:none;}

/* Sudhakar: Change the Header Slider Font size and colour of maintitle and subtitle */
h2.maintitle {color: #ffff00 !important; font-size: 30px !important; line-height: 30px !important;}
h2.maintitle:after{display: none;}
.subtitle {color: #ffff00 !important; font-size: 20px !important; line-height: 20px !important;}

/* Sudhakar: Move the Text on Slider to TOP LEFT /
/
.slide-inner {top: 50%; padding-left: 50px !important;
text-align: left;} */

/* Sudhakar: Decrease the white space in the footer */
.footer-widgets {padding-top: 20px; padding-bottom: 20px;}

/* Sudhakar: Remove Top/Bottom white space in all pages /
.page .site .page-wrap, .page .site .page-wrap .content-wrapper, .single .site .page-wrap .content-wrapper{/
padding-top: 1; */ padding-bottom: 0;}
.content-area > .site-main > .hentry {padding-bottom: 0;}
.content-area > .site-main > .hentry .entry-footer {margin-top: 0;}

/* Sudhakar: Remove Top/Bottom white space in sidebar footer and colophon site footer */
#sidebar-footer.footer-widgets {padding-bottom: 0;}
#sidebar-footer.footer-widgets .widget {margin-bottom: 5px;}
#colophon.site-footer {padding-top: 1px; padding-bottom: 1px;}

/* Sudhakar: Make the Menu bar Opaque on Home page */
.home #masthead.site-header {background-color: rgba(38,96,155,.8)}

/* Sudhakar: Make the Menu bar height fixed on Home page /
/
.home #masthead.site-header.float-header{padding: 20px 0;} */

Okay, thank you.

After checking your site, you may need to add this code too:

.single-post .page-wrap .content-wrapper {
    background: white;
}
.single-post .hentry .title-post {
    color: inherit;
}

Here is to decrease the space above the title:

.page-wrap {
    padding-top: 0;
}

And remove this code:

.single-post .entry-content {
    color: white;
}

Thanks. When i use the revised code, the Title on blog page is missing and the background colour is not in consistent with other pages.

I have also copied below the complete “Additional CSS” script for your information:

.page .page-wrap .content-wrapper, .single .page-wrap .content-wrapper {background-color: transparent;}

/* Sudhakar: Page Title colour White in all pages */
.hentry .title-post{color: white;}

/* Sudhakar: Decrease space above Page Title */
.page-wrap {padding-top: 0;}

/* Sudhakar: Remove formatting issues on Blog Page */
body:not(blog) .hentry .title-post {margin-top: 0;}
.single-post .page-wrap .content-wrapper {background: white;}
.single-post .hentry .title-post {color: inherit;}

.panel-grid-cell .widget-title{text-transform: capitalize;}
form{color: white;}

.site-logo{max-height: 50px;}
.header-wrap{margin-top:40px;}

/* Sudhakar: Menu Settings for Mobile */
@media only screen and (max-width:1025px){
.header-wrap .container{text-align: left;}
.header-wrap .btn-menu{float: right; margin-right: 15px;}
.header-wrap .col-md-4 {max-width: 90%; position: relative; z-index: 2;}
.header-wrap .col-md-8 {margin-top: -50px;}
#mainnav-mobi {top: 70px;}
.site-header.fixed, .site-header.fixed.float-header{position: fixed !important;}
.sydney-hero-area{margin-top: 130px;}}

/* Sudhakar: Remove small line under title in widget */
.panel-grid-cell .widget-title:after{display:none;}

/* Sudhakar: Change the Header Slider Font size and colour of maintitle and subtitle */
h2.maintitle {color: #ffff00 !important; font-size: 30px !important; line-height: 30px !important;}
h2.maintitle:after{display: none;}
.subtitle {color: #ffff00 !important; font-size: 20px !important; line-height: 20px !important;}

/* Sudhakar: Move the Text on Slider to TOP LEFT /
/
.slide-inner {top: 50%; padding-left: 50px !important;
text-align: left;} */

/* Sudhakar: Decrease the white space in the footer */
.footer-widgets {padding-top: 20px; padding-bottom: 20px;}

/* Sudhakar: Remove Top/Bottom white space in all pages /
.page .site .page-wrap, .page .site .page-wrap .content-wrapper, .single .site .page-wrap .content-wrapper{/
padding-top: 1; */ padding-bottom: 0;}
.content-area > .site-main > .hentry {padding-bottom: 0;}
.content-area > .site-main > .hentry .entry-footer {margin-top: 0;}

/* Sudhakar: Remove Top/Bottom white space in sidebar footer and colophon site footer */
#sidebar-footer.footer-widgets {padding-bottom: 0;}
#sidebar-footer.footer-widgets .widget {margin-bottom: 5px;}
#colophon.site-footer {padding-top: 1px; padding-bottom: 1px;}

/* Sudhakar: Make the Menu bar Opaque on Home page */
.home #masthead.site-header {background-color: rgba(38,96,155,.8)}

/* Sudhakar: Make the Menu bar height fixed on Home page /
/
.home #masthead.site-header.float-header{padding: 20px 0;} */

So, you want the title area to have a black background color and the content area has a blue background color. correct? is yes, please try this code:

.single-post .page-wrap .content-wrapper {
    background: transparent;
    padding-top: 0;
}

.single-post .entry-header a, .single-post .hentry .meta-post, .single-post .hentry .meta-post a, .single-post .single-meta, .single-post .hentry .title-post, .single-post .single-meta .sydney-svg-icon, .single-post .entry-content {
    color: white;
    fill: white;
}


.single-post .page-wrap {
    background: #388fe8;
}

.single-post header.entry-header,
.single-post .heateor_sss_sharing_container.heateor_sss_horizontal_sharing {
    background: black;
    margin-left: -30px;
    margin-right: -30px;
    padding: 5px 15px;
}
.single-post .heateor_sss_sharing_container.heateor_sss_horizontal_sharing{
    top: -30px;
    position: relative;

}
@media (min-width: 768px){
    .single-post header.entry-header,
    .single-post .heateor_sss_sharing_container.heateor_sss_horizontal_sharing {
        margin-left: -40px;
        margin-right: -40px;
        padding: 10px 40px;
    }

}
@media (min-width: 800px){
    .single-post header.entry-header,
    .single-post .heateor_sss_sharing_container.heateor_sss_horizontal_sharing {
        margin-left: -60px;
        margin-right: -60px;
        padding: 10px 50px;
    }

}
@media (min-width: 1024px){
    .single-post header.entry-header,
    .single-post .heateor_sss_sharing_container.heateor_sss_horizontal_sharing {
        width: 100.2vw;
    }

}
@media (min-width: 1200px){
    .single-post header.entry-header,
    .single-post .heateor_sss_sharing_container.heateor_sss_horizontal_sharing {
        width: 100vw;
        padding: 15px 125px;
        margin-left: -127px;
    }
}
@media (min-width: 1400px){
    .single-post header.entry-header,
    .single-post .heateor_sss_sharing_container.heateor_sss_horizontal_sharing {
        width: 100vw;
        padding: 15px 165px;
        margin-left: -165px;
    }
}
@media (min-width: 1900px){
    .single-post header.entry-header,
    .single-post .heateor_sss_sharing_container.heateor_sss_horizontal_sharing {
        width: 99.1vw;
        padding: 15px 397px;
        margin-left: -397px;
    }
}
@media (min-width: 2000px){
    .single-post header.entry-header,
    .single-post .heateor_sss_sharing_container.heateor_sss_horizontal_sharing {
        width: 100vw;
        padding: 15px 725px;
        margin-left: -725px;
    }
}

Oops that is a lot of CSS Code . I have implemented the CSS code. However, I don’t see any difference.

I still see the following issues on the Blog Page:
(1) Title is missing
(2) background colour is not in consistent with other pages i.e. black background color and the content area has a blue background color

Instead of making so many changes just for a blog page, I would like to know if you can provide a better template for Blog page? The current blog page looks vary basic and has no provision to choose post categories

I appreciate update on my queries. Thanks

Hi,

I’ve tested the code above and it makes a change to the page like so:

So, please implement the code then I can continue to help you to solve the issue

Well, As suggested by you, I have implemented the code. However, I still see the following issues on the main Blog Page:
(1) Title is missing
(2) Background colour is not consistent with other pages i.e. black background color and the content area has a blue background color. Find below the Screen snapshot of the main blog page:

Find below the complete CCS script in “Additional CSS”:
/* Sudhakar: Hide Topbar, Menu Headers and Sider Footer of XanGo Juice page */
.page-id-3507 #tpbr_topbar,
.page-id-3507 #masthead,
.page-id-3507 #sidebar-footer,
.page-id-3507 .header-clone {display: none;}

/* Sudhakar: Hide Topbar, Menu Headers and Sider Footer of Cryptocurrencies page */
.page-id-3490 #tpbr_topbar,
.page-id-3490 #masthead,
.page-id-3490 #sidebar-footer,
.page-id-3490 .header-clone {display: none;}

.page .page-wrap .content-wrapper, .single .page-wrap .content-wrapper {background-color: transparent;}

/* Sudhakar: Page Title colour White in all pages */
.hentry .title-post{color: white;}

/* Sudhakar: Decrease space above Page Title /
/
.single .entry-header, .page .entry-header {margin-bottom: 0;} */

/* Sudhakar: Remove formatting issues on Blog Page */
body:not(blog) .hentry .title-post {margin-top: 0;}
.single-post .page-wrap .content-wrapper {background: white;}
.single-post .hentry .title-post {color: inherit;}

.panel-grid-cell .widget-title{text-transform: capitalize;}
form{color: white;}

.site-logo{max-height: 50px;}
.header-wrap{margin-top:40px;}

/* Sudhakar: Menu Settings for Mobile */
@media only screen and (max-width:1025px){
.header-wrap .container{text-align: left;}
.header-wrap .btn-menu{float: right; margin-right: 15px;}
.header-wrap .col-md-4 {max-width: 90%; position: relative; z-index: 2;}
.header-wrap .col-md-8 {margin-top: -50px;}
#mainnav-mobi {top: 70px;}
.site-header.fixed, .site-header.fixed.float-header{position: fixed !important;}
.sydney-hero-area{margin-top: 130px;}}

/* Sudhakar: Remove small line under title in widget */
.panel-grid-cell .widget-title:after{display:none;}

/* Sudhakar: Change the Header Slider Font size and colour of maintitle and subtitle */
.text-slider{ background-color: rgba(22,56,91,.70); padding-top: 25px;}
h2.maintitle {color: #ffffff !important; font-size: 30px !important; line-height: 30px !important;}
h2.maintitle:after{display: none;}
.subtitle {color: #ffffff !important; font-size: 20px !important; line-height: 20px !important;}

/* Sudhakar: Move the Text on Slider to TOP LEFT /
/
.slide-inner {top: 50%; padding-left: 50px !important;
text-align: left;} */

/* Sudhakar: Decrease the white space in the footer */
.footer-widgets {padding-top: 20px; padding-bottom: 20px;}

/* Sudhakar: Remove Top/Bottom white space in all pages /
.page .site .page-wrap, .page .site .page-wrap .content-wrapper, .single .site .page-wrap .content-wrapper{/
padding-top: 1; */ padding-bottom: 0;}
.content-area > .site-main > .hentry {padding-bottom: 0;}
.content-area > .site-main > .hentry .entry-footer {margin-top: 0;}

/* Sudhakar: Remove Top/Bottom white space in sidebar footer and colophon site footer */
#sidebar-footer.footer-widgets {padding-bottom: 0;}
#sidebar-footer.footer-widgets .widget {margin-bottom: 5px;}
#colophon.site-footer {padding-top: 1px; padding-bottom: 1px;}

/* Sudhakar: Make the Menu bar Opaque on Home page */
.home #masthead.site-header {background-color: rgba(38,96,155,.8)}

/* Sudhakar: Make the Menu bar height fixed on Home page /
/
.home #masthead.site-header.float-header{padding: 20px 0;} */

/* Sudhakar: Blog title area to have a black background color and the content area has a blue background color. */
.single-post .page-wrap .content-wrapper {background: transparent; padding-top: 0;}
.single-post .entry-header a, .single-post .hentry .meta-post, .single-post .hentry .meta-post a, .single-post .single-meta, .single-post .hentry .title-post, .single-post .single-meta .sydney-svg-icon, .single-post .entry-content {color: white; fill: white;}
.single-post .page-wrap {background: #388fe8;}
.single-post header.entry-header, .single-post .heateor_sss_sharing_container.heateor_sss_horizontal_sharing {background: black; margin-left: -30px; margin-right: -30px; padding: 5px 15px;}
.single-post .heateor_sss_sharing_container.heateor_sss_horizontal_sharing{top: -30px; position: relative;}

@media (min-width: 768px){.single-post header.entry-header, .single-post .heateor_sss_sharing_container.heateor_sss_horizontal_sharing {margin-left: -40px; margin-right: -40px; padding: 10px 40px;}}

@media (min-width: 800px){.single-post header.entry-header, .single-post .heateor_sss_sharing_container.heateor_sss_horizontal_sharing {margin-left: -60px; margin-right: -60px; padding: 10px 50px;}}

@media (min-width: 1024px){.single-post header.entry-header, .single-post .heateor_sss_sharing_container.heateor_sss_horizontal_sharing {width: 100.2vw;}}

@media (min-width: 1200px){.single-post header.entry-header, .single-post .heateor_sss_sharing_container.heateor_sss_horizontal_sharing {width: 100vw; padding: 15px 125px; margin-left: -127px;}}

@media (min-width: 1400px){.single-post header.entry-header, .single-post .heateor_sss_sharing_container.heateor_sss_horizontal_sharing {width: 100vw; padding: 15px 165px; margin-left: -165px;}}

@media (min-width: 1900px){.single-post header.entry-header, .single-post .heateor_sss_sharing_container.heateor_sss_horizontal_sharing {width: 99.1vw; padding: 15px 397px; margin-left: -397px;}}

@media (min-width: 2000px){.single-post header.entry-header, .single-post .heateor_sss_sharing_container.heateor_sss_horizontal_sharing {width: 100vw; padding: 15px 725px; margin-left: -725px; }}