Docs

[owaves]

Yes, sorry for not clarifying. The blog is actually looking a lot like I wanted. All I’d like to change really is have the read more button say “continue” and have it appear at the end of the excerpt not by itself below. I’m not sure what fixed the broken responsive. Probably all the absolute widths I commented out! How would I go back and fix those? Do I convert all px measurements to %? What about cornerstone in-line styles those will have to be changed to % measurements correct? Just looking to see if I’m on level with this as I love you guys helping but want to understand as well. The biggest issue I can see is the use of the social share plugin. I need these to display in a certain area on the actual posts/portfolios (after the meta info but before the blog information.) I had to use absolute positioning as I cannot edit the php myself. Is this something that can be done on your end or what do you suggest? Thanks a million!

[Rad]

Hi there,

You don’t need to change all % to px. And I’m not really sure the changes you made and I can’t compare it to how it was. Do you have a backup of your older CSS?

About the read more. Please add this code to your child theme’s functions.php

  function x_excerpt_string( $more ) {
    
    $stack = x_get_stack();

    if ( $stack == 'integrity' ) {
      return ' ... <div><a href="' . get_permalink() . '" class="more-link">' . __( 'Continue', '__x__' ) . '</a></div>';
    } else if ( $stack == 'renew' ) {
      return ' ... <a href="' . get_permalink() . '" class="more-link">' . __( 'Continue', '__x__' ) . '</a>';
    } else if ( $stack == 'icon' ) {
      return ' ...';
    } else if ( $stack == 'ethos' ) {
      return ' ...';
    }

  }
  add_filter( 'excerpt_more', 'x_excerpt_string' );

Then please add this CSS as well,

  .blog .entry-content.excerpt div:last-child, .blog .entry-content.excerpt p:nth-last-child(2) {
  display: inline;
  }

Cheers!

[owaves]

Thanks that changed the button! I just need it red now.. I haven’t changed any px to % yet. All I did was comment out the sections I was told to remove in the beginning of the thread, and fix the space between 88 and % on “.x-container.width.” Here is my original CSS:

a,
h1 a:hover,
h2 a:hover,
h3 a:hover,
h4 a:hover,
h5 a:hover,
h6 a:hover,
.x-topbar .p-info a:hover,
.x-breadcrumb-wrap a:hover,
.widget ul li a:hover,
.widget ol li a:hover,
.widget.widget_text ul li a,
.widget.widget_text ol li a,
.widget_nav_menu .current-menu-item > a,
.x-widgetbar .widget ul li a:hover,
.x-accordion-heading .x-accordion-toggle:hover,
.x-comment-author a:hover,
.x-comment-time:hover,
.x-recent-posts a:hover .h-recent-posts {
color: #fff;
}
a:hover,
.widget.widget_text ul li a:hover,
.widget.widget_text ol li a:hover,
.x-twitter-widget ul li a:hover {
color: #d80f0f;
}
.rev_slider_wrapper,
a.x-img-thumbnail:hover,
.x-slider-container.below,
.page-template-template-blank-3-php .x-slider-container.above,
.page-template-template-blank-6-php .x-slider-container.above {
border-color: #fff;
}
.entry-thumb:before,
.x-pagination span.current,
.flex-direction-nav a,
.flex-control-nav a:hover,
.flex-control-nav a.flex-active,
.mejs-time-current,
.x-dropcap,
.x-skill-bar .bar,
.x-pricing-column.featured h2,
.h-comments-title small,
.x-entry-share .x-share:hover,
.x-highlight,
.x-recent-posts .x-recent-posts-img:after {
background-color: transparent;
}
.x-nav-tabs > .active > a,
.x-nav-tabs > .active > a:hover {
box-shadow: inset 0 3px 0 0 #fff;
}
.x-btn-widgetbar {
display: none;
}
.x-main {
width: 69.536945%;
}
.x-sidebar {
width: 25.536945%;
}
.x-topbar .p-info,
.x-topbar .p-info a,
.x-navbar .desktop .x-nav > li > a,
.x-navbar .desktop .sub-menu a,
.x-navbar .mobile .x-nav li > a,
.x-breadcrumb-wrap a,
.x-breadcrumbs .delimiter {
color: #999999;
}
.x-navbar .desktop .x-nav > li > a:hover,
.x-navbar .desktop .x-nav > .x-active > a,
.x-navbar .desktop .x-nav > .current-menu-item > a,
.x-navbar .desktop .sub-menu a:hover,
.x-navbar .desktop .sub-menu .x-active > a,
.x-navbar .desktop .sub-menu .current-menu-item > a,
.x-navbar .desktop .x-nav .x-megamenu > .sub-menu > li > a,
.x-navbar .mobile .x-nav li > a:hover,
.x-navbar .mobile .x-nav .x-active > a,
.x-navbar .mobile .x-nav .current-menu-item > a {
color: #272727;
}
.x-navbar .desktop .x-nav > li > a:hover,
.x-navbar .desktop .x-nav > .x-active > a,
.x-navbar .desktop .x-nav > .current-menu-item > a {
box-shadow: inset 0 4px 0 0 #fff;
}
.x-navbar .desktop .x-nav > li > a {
height: 80px;
padding-top: 32px;
}
.x-navbar .desktop .x-nav > li ul {
top: 65px;
;
}
.x-comment-author,
.x-comment-time,
.comment-form-author label,
.comment-form-email label,
.comment-form-url label,
.comment-form-rating label,
.comment-form-comment label,
.widget_calendar #wp-calendar caption,
.widget.widget_rss li .rsswidget {
font-family: Lato;
font-weight: 700;
}
.p-landmark-sub,
.p-meta,
input,
button,
select,
textarea {
font-family: Lato;
}
.widget ul li a,
.widget ol li a,
.x-comment-time {
color: hsl(0, 0%, 35%);
}
.widget_text ol li a,
.widget_text ul li a {
color: #fff;
}
.widget_text ol li a:hover,
.widget_text ul li a:hover {
color: #d80f0f;
}
.comment-form-author label,
.comment-form-email label,
.comment-form-url label,
.comment-form-rating label,
.comment-form-comment label,
.widget_calendar #wp-calendar th,
.p-landmark-sub strong,
.widget_tag_cloud .tagcloud a:hover,
.widget_tag_cloud .tagcloud a:active,
.entry-footer a:hover,
.entry-footer a:active,
.x-breadcrumbs .current,
.x-comment-author,
.x-comment-author a {
color: #272727;
}
.widget_calendar #wp-calendar th {
border-color: #272727;
}
.h-feature-headline span i {
background-color: #272727;
}
@media (max-width:979px) {}
body {
font-size: 12px;
font-style: normal;
font-weight: 300;
color: hsl(0, 0%, 35%);
background-color: hsl(0, 0%, 100%);
}
a:focus,
select:focus,
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="submit"]:focus,
input[type="checkbox"]:focus {
outline: thin dotted #333;
outline: 5px auto #fff;
outline-offset: -1px;
}
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
font-family: "Lato", sans-serif;
font-style: normal;
font-weight: 700;
}
h1,
.h1 {
letter-spacing: -0.035em;
}
h2,
.h2 {
letter-spacing: -0.035em;
}
h3,
.h3 {
letter-spacing: -0.035em;
}
h4,
.h4 {
letter-spacing: -0.035em;
}
h5,
.h5 {
letter-spacing: -0.035em;
}
h6,
.h6 {
letter-spacing: -0.035em;
}
.w-h {
font-weight: 700 !important;
}
.x-container.width {
width: 88 %;
}
.x-container.max {
max-width: 960px;
}
.x-main.full {
float: none;
display: block;
width: auto;
}
@media (max-width:979px) {
.x-main.full,
.x-main.left,
.x-main.right,
.x-sidebar.left,
.x-sidebar.right {
float: none;
display: block;
width: auto !important;
}
}
.entry-header,
.entry-content {
font-size: 12px;
}
body,
input,
button,
select,
textarea {
font-family: "Lato", sans-serif;
}
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a,
.h1 a,
.h2 a,
.h3 a,
.h4 a,
.h5 a,
.h6 a,
blockquote {
color: #272727;
}
.cfc-h-tx {
color: #272727 !important;
}
.cfc-h-bd {
border-color: #272727 !important;
}
.cfc-h-bg {
background-color: #272727 !important;
}
.cfc-b-tx {
color: hsl(0, 0%, 35%) !important;
}
.cfc-b-bd {
border-color: hsl(0, 0%, 35%) !important;
}
.cfc-b-bg {
background-color: hsl(0, 0%, 35%) !important;
}
.x-navbar-inner {
min-height: 80px;
}
.x-brand {
margin-top: 24px;
font-family: "Lato", sans-serif;
font-size: 24px;
font-style: normal;
font-weight: 400;
letter-spacing: -0.035em;
color: #272727;
}
.x-brand:hover,
.x-brand:focus {
color: #272727;
}
.x-brand img {
width: 150px;
}
.x-navbar .x-nav-wrap .x-nav > li > a {
font-family: "Lato", sans-serif;
font-style: normal;
font-weight: 400;
letter-spacing: 0em;
}
.x-navbar .desktop .x-nav > li > a {
font-size: 14px;
}
.x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
padding-left: 18px;
padding-right: 18px;
}
.x-navbar .desktop .x-nav > li > a > span {
margin-right: -0em;
}
.x-btn-navbar {
margin-top: 20px;
}
.x-btn-navbar,
.x-btn-navbar.collapsed {
font-size: 24px;
}
@media (max-width:979px) {
.x-widgetbar {
left: 0;
right: 0;
}
}
.x-btn,
.button,
[type="submit"] {
color: #E3E3E3;
border-color: #E3E3E3;
background-color: transparent;
margin-bottom: 0.25em;
text-shadow: none;
box-shadow: none;
border-radius: 0.25em;
}
.x-btn:hover,
.button:hover,
[type="submit"]:hover {
color: #fff;
border-color: #ddd;
background-color: #ddd;
margin-bottom: 0.25em;
text-shadow: none;
box-shadow: none;
}
.x-btn.x-btn-real,
.x-btn.x-btn-real:hover {
margin-bottom: 0.25em;
text-shadow: none;
}
.x-btn.x-btn-real {
box-shadow: none;
}
.x-btn.x-btn-real:hover {
box-shadow: none;
}
.x-btn.x-btn-flat,
.x-btn.x-btn-flat:hover {
margin-bottom: 0;
text-shadow: none;
box-shadow: none;
}
.x-btn.x-btn-transparent,
.x-btn.x-btn-transparent:hover {
margin-bottom: 0;
border-width: 3px;
text-shadow: none;
text-transform: uppercase;
background-color: transparent;
box-shadow: none;
}
.x-navbar .mobile .x-nav li>a {
float: left;
padding: 0 1.2em 1em 0;
border: 0;
}
.x-navbar .mobile .x-nav>li.x-menu-item-search>a {
border: 0;
}
.x-navbar .desktop .x-nav > li > a {
font-size: 1.15em;
color: #999;
padding-top: 36px;
}
blockquote {
font-weight: 300;
}
.x-iso-container.cols-3>.hentry {
width: 24.28% !important;
}
.x-navbar {
border-bottom: none !important;
box-shadow: none !important;
}
a.x-btn-navbar.collapsed {
padding: 2.2% 0!important;
-webkit-box-shadow:none!important;
box-shadow:none!important;
border-color: rgba(0,0,0,0.075)!important;
background-color: transparent!important;
font-size: 28px;
}
a.x-portfolio-filters {
display: none;
}
.mission-phone {
display: table-cell;
vertical-align: top;
font-weight: 300;
line-height: 1;
}
a.x-portfolio-filter {
border: 0;
padding: 0 .5em 0 .5em;
margin: 0;
text-transform: none;
}
.x-portfolio-filters-menu {
margin-top: 0;
}
.option-set {
margin-top: 0;
}
.x-header-landmark {
margin-top: 0;
}
.x-container.offset {
margin-top: 24px;
}
.single-x-portfolio .entry-featured {
display: none;
}
.has-post-thumbnail .entry-featured {
box-shadow: 0 0 0 0;
border: 0px solid #e0e0e0;
border-bottom: 0;
}
.entry-featured a.entry-thumb {
background: #fff;
}
.post.type-post.status-publish.format-standard.has-post-thumbnail.hentry .entry-featured {
width: 384px;
height: auto;
margin: 0 auto;
}
.entry-wrap.cf {
padding: 0;
border: 0px solid #e0e0e0;
border-top: 0;
box-shadow: 0 0 0 0;
}
.single-x-portfolio .entry-info, .single-x-portfolio .entry-extra {
width: 100% !important;
float: none !important;
}
h2.entry-title.entry-title-portfolio {
font-size: 120%;
line-height: 1.16;
display: none;
}
.entry-thumb:before {
content: none;
}
ul.flex-direction-nav {
display: none;
}
.x-iso-container>.hentry {
padding: 0 .6em 1.2em;
}
.page-template-template-layout-portfolio .x-pagination {
display: none;
}
a.x-btn-gray {
max-width: 176px;
margin: 0 auto;
color: #E3E3E3;
background-color: transparent;
border: 1px solid #E3E3E3;
text-shadow: none !important;
font-weight: 100;
}
.x-blockquote-4c {
margin: 0;
padding: 0 0 1em;
border: 0;
color: #333;
font-size: 140%;
letter-spacing: -.03em;
line-height: 1.2;
}
.x-blockquote-4c cite {
padding: .5em 0 0 0;
font-size: 72%;
letter-spacing: -.01em;
}
.x-entry-share {
border: 0;
text-align: left;
}
.x-share-options p {
float: left;
padding: 1.1% 1.5% 0 0;
display: none;
}
.x-entry-share .x-share {
width: 40px;
height: 40px;
line-height: 40px;
padding: 0 0 0 .20em;
margin: 0 .2em 0 -.22em;
color: #b8b8b8;
font-size: 2em;
}
.entry-content {
margin-top: .75em;
font-size: 1.2em;
font-weight: 400;
color: #808080;
line-height: 1.45;
}
.x-colophon.top {
border: 0;
box-shadow: 0 0 0 0;
padding: 1% 0 2%;
}
#menu-footer-menu.menu {
border: none;
text-decoration: none;
font-weight: 300;
font-size: 1.25em;
}
.dnload {
float: left;
}
.footsocial {
display: inline;
float: right;
}
/* Responsive Media Queries */
@media screen and (max-width: 500px) {
.home .h-custom-headline { font-size: 176%; }
}
/* Custom Footer CSS */
#menu-footer-menu {
margin-top: 30px;
/*float: left;*/
}
.widget_text ol, .widget_text ul {
list-style: none;
}
/*
.download {
width: 184px;
height: 54px;
text-indent: -999999px;
float: left; fixes img collapse
background: url(img/applednldbtn.jpg) no-repeat;
margin-left: 0px;
margin-top: 50px;
}
.download:hover {
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.download:hover {
opacity: 0.5;
}
*/
a:hover,
.widget.widget_text ul li a:hover,
.widget.widget_text ol li a:hover,
.x-twitter-widget ul li a:hover {
color: #888;
}
a,
h1 a:hover,
h2 a:hover,
h3 a:hover,
h4 a:hover,
h5 a:hover,
h6 a:hover,
.x-topbar .p-info a:hover,
.x-breadcrumb-wrap a:hover,
.widget ul li a:hover,
.widget ol li a:hover,
.widget.widget_text ul li a,
.widget.widget_text ol li a,
.widget_nav_menu .current-menu-item > a,
.x-widgetbar .widget ul li a:hover,
.x-accordion-heading .x-accordion-toggle:hover,
.x-comment-author a:hover, .x-comment-time:hover,
.x-recent-posts {
color: #888;
}
a:hover {
color: #000;
}
.x-colophon.bottom .x-container.max.width {
border-top: 1px solid #e0e0e0;
width: 960px;
}
.x-colophon + .x-colophon {
border-top: 0px;
}
.tm-id {
font-size: 1.8em;
font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: 100;
color: #000; width: 230px;
}
.tm-job {
font-size: 1.4em;
font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: 100;
color: #000;
margin-top: -35px;
}
.tm-bio {
font-size: 1.1em;
font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: 100;
color: #7a7a7a;
margin-top: -20px;
}
#signup {
margin-top: 70px;
margin-left: 50px;
color: #888;
font-weight: bold;
}
.mc4wp-form-fields p.email {
margin-top: 63px;
margin-left: -50px;
}
.x-btn, .button, p.send, [type="submit"] {
color: #ddd;
height: 35px;
background-color: transparent;
margin-bottom: 0.25em;
text-shadow: none;
box-shadow: none;
border-radius: 0.25em;
float: right;
margin-top: -30px;
margin-right: 25px;
padding: 0px;
border-color: #ddd;
}
/* Social Buttons
.textwidget .footsocial {
margin-top: 55px;
width: 220px;
}
.fb {
width: 40px;
height: 40px;
background: url(img/fb.gif) no-repeat;
text-indent: -999999px;
float: left;
}
.fb:hover {
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.fb:hover {
opacity: 0.5;
}
.tw {
width: 40px;
height: 40px;
background: url(img/tw.gif) no-repeat;
text-indent: -999999px;
float: left;
margin-left: 5px;
}
.tw:hover {
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.tw:hover {
opacity: 0.5;
}
.ig {
width: 40px;
height: 40px;
background: url(img/ig.gif) no-repeat;
text-indent: -999999px;
float: left;
margin-left: 5px;
}
.ig:hover {
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.ig:hover {
opacity: 0.5;
}
.pt {
width: 40px;
height: 40px;
background: url(img/pt.gif) no-repeat;
text-indent: -999999px;
float: left;
margin-left: 5px;
}
.pt:hover {
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.pt:hover {
opacity: 0.5;
}
.yt {
width: 40px;
height: 40px;
background: url(img/yt.gif) no-repeat;
text-indent: -999999px;
float: left;
margin-left: 5px;
}
.yt:hover {
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.yt:hover {
opacity: 0.5;
}
*/
.x-text.cs-ta-center.tm-social {
width: 211px;
}
.tm-social {
list-style: none;
margin-left: 40px;
}
#in-tm, #pt-tm, #fb-tm, #ig-tm, #yt-tm  {
float: left;
margin-left: -10px;
}
#iwatch {
margin-top: -125px;
}
#bodyclock {
margin-top: 35px;
}
.widget p:last-child, .widget ul:last-child, .widget ol:last-child {
margin-bottom: 0;
margin-left: -45px;
}
.frm_style_formidable-style.with_frm_style input[type="submit"] {
color: #ddd;
height: 35px;
background-color: transparent;
text-shadow: none;
box-shadow: none;
border-radius: 0.25em;
padding: 0px;
border-color: #ddd;
font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
}
.frm_style_formidable-style.with_frm_style input[type="submit"]:hover {
color: #fff;
background-color: #ddd;
border-color: #ddd;
}
/* Post Layout Styles */
.entry-wrap {
box-shadow: none;
margin: 0 auto;
}
.post.type-post.status-publish.format-standard.has-post-thumbnail.hentry {
width: 620px;
margin: 0 auto;
}
.entry-title {
font-size: 3.345em;
width: 100%;
margin-bottom: 138px;
text-align:center;
}
.entry-content.content h2 {
width: 100%;
text-align:center;
font-size: 2em;
margin-bottom: 45px;
}
h1.entry-title.entry-title-portfolio {
margin-bottom: 138px;
font-size: 3.345em;
}
.post-3173.post.type-post.status-publish.format-standard.has-post-thumbnail.hentry {
margin-top: 70px;
}
.entry-content content {
width: 620px;
margin: 0 auto;
}
.has-post-thumbnail .entry-wrap {
width: 100%;
height: auto;
padding: 0;
}
.entry-footer.cf {
display: none;
}
.entry-content.content h1 {
text-align: center;
}
#respond.comment-respond {
display: none;
}
/* Social Share */
.addtoany_share_save_container.port-share {
margin-left: 37%;
}
.addtoany_share_save_container.addtoany_content_top {
width: 160px;
margin: 0 auto;
}
.meta-comments {
color: red;
}
.entry-extra .p-meta {
text-align: center;
}
.entry-extra {
margin-top: 50px;
}
.x-entry-share.man .x-share-options {
text-align: center;
}
.x-portfolio.type-x-portfolio.status-publish.has-post-thumbnail.hentry .entry-content.content {
width: 620px;
margin: 0 auto;
padding: none;
}
.entry-thumb {
background: transparent;
}
#menu-footer-menu {
margin-left: -26px;
margin-top: 30px;
width: 500px;
}
.x-colophon.bottom .x-colophon-content {
float: right;
margin-right: -10px;
margin-top: -26px;
width: 150px;
}
.entry-content.content h1 {
margin-bottom: 137px;
text-align: center;
}
.x-header-landmark.x-container.max.width {
display: none;
}
.post.type-post.status-publish.format-standard.has-post-thumbnail.hentry {
margin-bottom: 60px;
}
/* Share Buttons */
.entry-info .addtoany_share_save_container.addtoany_content_top {
margin: 800px 0 -100px 230px;
position: absolute;
width: 160px;
}
.addtoany_share_save_container.addtoany_content_top {
margin: 235px 0 -100px 230px;
position: absolute;
width: 160px;
}
.post-3165 .addtoany_share_save_container.addtoany_content_top {
margin-top: 175px;
position: absolute;
width: 160px;
}
.post-3151 .addtoany_share_save_container.addtoany_content_top {
margin-top: 290px;
position: absolute;
width: 160px;
}
.post-781 .addtoany_share_save_container.addtoany_content_top {
margin-top: 170px;
position: absolute;
width: 160px;
}
.post-814 .addtoany_share_save_container.addtoany_content_top {
margin-top: 300px;
position: absolute;
width: 160px;
}
.post-1248 .addtoany_share_save_container.addtoany_content_top {
margin-top: 280px;
position: absolute;
width: 160px;
}
.post-1353 .addtoany_share_save_container.addtoany_content_top {
margin-top: 280px;
position: absolute;
width: 160px;
}
.post-1564 .addtoany_share_save_container.addtoany_content_top {
margin-top: 175px;
position: absolute;
width: 160px;
}
.post-58 .addtoany_share_save_container.addtoany_content_top {
margin-top: 170px;
position: absolute;
width: 160px;
}
.post-114 .addtoany_share_save_container.addtoany_content_top {
margin-top: 170px;
position: absolute;
width: 160px;
}
.post-136 .addtoany_share_save_container.addtoany_content_top {
margin-top: 300px;
position: absolute;
width: 160px;
}
.post-171 .addtoany_share_save_container.addtoany_content_top {
margin-top: 160px;
position: absolute;
width: 160px;
}
.post-309 .addtoany_share_save_container.addtoany_content_top {
margin-top: 280px;
position: absolute;
width: 160px;
}
.post-333 .addtoany_share_save_container.addtoany_content_top {
margin-top: 280px;
position: absolute;
width: 160px;
}
.post-374 .addtoany_share_save_container.addtoany_content_top {
margin-top: 130px;
position: absolute;
width: 160px;
}
.post.type-post.status-publish.format-standard.has-post-thumbnail.hentry h1.entry-title {
display: none;
}
.post.type-post.status-publish.format-standard.has-post-thumbnail.hentry p.p-meta {
margin-top: -15px;
margin-left: -90px;
position: absolute;
width: 775px;
text-align: center;
}
.single.single-post.single-format-standard.logged-in.admin-bar
.x-integrity.x-integrity-light.x-navbar-static-active.x-full-width-layout-active
.x-full-width-active.x-v4_6_2.x-child-theme-active.cornerstone-v1_3_2.customize-support p.p-meta {
margin-top: 200px;
}
.x-portfolio.type-x-portfolio.status-publish.has-post-thumbnail.hentry h1.entry-title.entry-title-portfolio {
display: none;
}
.blog.logged-in.admin-bar.x-integrity.x-integrity-light.x-navbar-static-active
.x-full-width-layout-active.x-full-width-active.x-blog-standard-active.x-v4_6_2
.x-child-theme-active.cornerstone-v1_3_2.customize-support.x-main.full {
margin-top: -50px;
}
h2.entry-title {
margin-bottom: 40px;
margin-left: -75px;
margin-top: 40px;
text-align: center;
width: 775px;
}
.more-link {
margin-left: 255px;
margin-top: -20px;
}
.entry-content.excerpt {
margin-left: 10px;
width: 620px;
}
.entry-content.excerpt p {
margin-top: 55px;
}

[owaves]

I am also wondering if you could help tell me how to change the portfolio posts to the same mobile style as the blog. The responsiveness seems to be broken on those pages as well as the footer pages. I think it may be a witch on the h2 elements. Thanks!

[Christopher]

Hi there,

Please add this code:

a.more-link {
color: red;
}

Find this code :

.x-portfolio.type-x-portfolio.status-publish.has-post-thumbnail.hentry .entry-content.content {
width: 620px;
margin: 0 auto;
padding: none;
}

And update it to :

@media (min-width:979px){
.x-portfolio.type-x-portfolio.status-publish.has-post-thumbnail.hentry .entry-content.content {
width: 620px;
margin: 0 auto;
padding: none;
}
}

The rest of your code seems fine to me, if you experience any issue, let us know about it.

Thanks.

[owaves]

I put in the code and my portfolio pages haven’t changed but now my post excerpts are yellow! As per the recent comments on removing the absolute measurements, where do I make the px to % changes in my code? I am still seeing broken responsiveness on the footer pages and portfolio posts.

[owaves]

I fixed the color. I noticed now on desktop my blog pages are too wide now. I need the desktop to stay at 620px wide max width. I also really need the portfolio pages styled just like the blog pages e.g. “image/header h1/post.” Thank you guys seriously for keeping up with this post you have made this a lot easier to get through!

[Rad]

Hi there,

Hmm, I’m confused about the issue. How about setting the layout max width to 620px in customizer? Or simply add this.

.site > .x-container.max {
max-width: 620px;
}

Your blog post and portfolio post has the same look, the only difference is the meta information which is only available on blog posts. Would you mind providing screenshots with some notes, I just need it for comparison.

Thanks!

[owaves]

Hello, I only need the blog landing page, blog posts, and portfolio posts to be at 620px. The desktop version of the blog is too wide, should be 620px. Currently the portfolio pages look correct. My issue regarding the px to % is as per the recent author he said my code was using absolute px instead of % and I wanted to know where to change that. I still have pages that are not showing up correctly on mobile. Please see screenshots attached.

[owaves]

Here is more screenshots.

[owaves]

Here is the PS intended look:

[Rad]

Hi there,

I see, let’s discuss it one by one.

Your site is responsive, but there is a problem on how you create the content.

Overlapping Elements : https://s3.amazonaws.com/community-themeco/app/uploads/2016/10/02214732/FireShot-Capture-108-About-Owaves-X-http___www.owaves.com_x_about_.png

That’s because you set the static height to your sections, and it contradicts the purpose responsive design. Please check this video.

Not responding titles : https://s3.amazonaws.com/community-themeco/app/uploads/2016/10/02214732/FireShot-Capture-108-About-Owaves-X-http___www.owaves.com_x_about_.png

That’s because of you set the static width and which again contradicts the purpose of responsive design.

Please check this video : https://www.dropbox.com/s/egb64dgjfwrja08/bandicam%202016-10-03%2013-18-06-133.mp4?dl=0 (please download the video for clear copy)

As you can see, there are too many. If you set static width and height it will then remain as is regardless of device (hence, non-responsive). I don’t know any shortcut solution for that, but you should fix it by using max-width and min-height instead of width and height.

And as much as possible, do not use negative margins directly to the element ( style option ), instead use class base styling with @media wrapper.

Example, add this to your custom CSS in customizer

@media ( min-width: 980px) {
.negative-top-margin {
margin-top: -90px;
}
}

Then inspect your element and add negative-top-margin to its class input field. This setup will ensure your CSS will be applied to desktop devices only ( greater than 980px ).

Then about the 620px, let’s try this replacing the CSS I just provided at #1199881

.single-post .x-main, .single-x-portfolio .x-main, .blog .site > .x-container.max {
max-width: 620px;
}

I did use max-width this time too. Then let’s tackle other once these are done to avoid confusions 🙂

Cheers!

[owaves]

Okay sorry for the bombardment of screenshots! I changed all the widths with px measurements to max-width and it looks like it worked. Thanks for the video it helped! I am still seeing spacing issues between the images, meta, and the headers on mobile. For example the blog page, blog posts (please see screenshots), and about headers (please see desktop version of “About” for reference which uses “margin-top: -30px” on the paragraphs.)

[Paul R]

Hi,

You can add this under Custom > Edit Global CSS in the Customizer.

body .has-post-thumbnail .entry-featured {
margin-bottom: 20px;
}
body .entry-content {
margin-top: 20px;
}
body .entry-title {
margin-bottom: 20px;
text-align:center;
}
body .p-meta {
text-align: center;
}
body .entry-content p {
margin-bottom: 20px;
}

You may change the margins to adjust the spacing.

Hope that helps.

[owaves]

This works. Would it be possible to make the portfolio posts have the same style as the blog pages? For example, in this order: image/header/meta/social. By default the h1 header doesn’t appear on the portfolio pages and I really need the header in there.

[Author]

Posts