Display post meta in Single post page on top of post

[taiger]

Hi I would like to move the Display post meta in Single post page from displaying on the left to displaying on top of the post.

CAn you tell me how we can do this.

T

[Laura]

Hello, this can be done with css
Here are different styles (check attachment):
STYLE 1

COPY CODE

article .article-meta {
  width: auto !important;
  float: right !important;
  text-align: center !important;
}
article .article-meta .post-meta .meta-author {
  float: none !important;
}
article .article-meta .post-meta .meta-author img {
  float: right !important;
  margin-right: 46% !important;
}

STYLE 2

COPY CODE

article .article-meta {
  width: auto !important;
  float: none !important;
  text-align: right !important;
  margin-right: 5% !important;
}

Add the style you want to quick css or style.css of child theme

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you

Attachments:

You must be logged in to view attached files.

[taiger]

This reply has been set as private.

[taiger]

This reply has been set as private.

[Laura]

Hello, please share a link so i can create a css code for you

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you

[taiger]

This reply has been set as private.

[Laura]

Hello, sorry i am not able to view the page i get this message “We are having a make over”

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you

[taiger]

This reply has been set as private.

[Laura]

Hello, its just a matter of a css change, that maybe others wouldnt want in a release, i can do it for you if you give me access to your website

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you

[taiger]

Hi thanks for getting back to me.

Please see past questions for the ftp info.

Please also let me know where the changes have been made. .just in case I need to revert.

Regards.

[Laura]

Hello, i do not know what child theme are you using, but you can place this css in style.css of your current child theme

COPY CODE

article .article-meta .post-meta small {
  font-size: 14px;
}

You can change 14px for the size that you want

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you

[taiger]

This reply has been set as private.

[Laura]

Hello, can you share a screenshot please?

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you

[taiger]

This reply has been set as private.

[Laura]

Hello, can you turn it on and link me to the page so i can adjust the size with css?

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you

[taiger]

This reply has been set as private.

[taiger]

This reply has been set as private.

[taiger]

This reply has been set as private.

[taiger]

This reply has been set as private.

[Laura]

Hello, thanks! will fix this in some minutes…
Will let you know

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you

[Laura]

Hello, fixed! Everything is in your quick css
CSS Used:

COPY CODE

article .article-meta {
  width: auto !important;
  float: left !important;
  text-align: center !important;
  margin-left: 310px !important;
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you

[taiger]

This reply has been set as private.

[taiger]

This reply has been set as private.

[taiger]

This reply has been set as private.

[Laura]

Mhm i see it, dont worry will fix it now

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you

[Laura]

Hello, changed the view, how does it looks now?

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you

[taiger]

This reply has been set as private.

[taiger]

This reply has been set as private.

[taiger]

This reply has been set as private.

[Laura]

Hello, it depends on the social media position so shouldnt be turned off, what is your screen size? Will check out the css for your screen

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you

[taiger]

This reply has been set as private.

[taiger]

This reply has been set as private.

[Laura]

Hello, fixed, how does it look now?

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you

[Laura]

The css is not working fine, do you have a cache plugin setup? Please add

COPY CODE

.w2dc-listings-block-content {
        width: 100%;
}
.container img {
  height: auto !important;
 }
@media screen and (max-width: 700px) {
#header .header-banner {
display:none;
}
}
header.w2dc-listing-header h2 a, header.w2dc-listing-header h2 a:visited {
    font-weight: normal;
}
.w2dc-categories-root {
    font-weight: normal;
}
div.w2dc-content .w2dc-fields-group {
    margin-bottom: 40px;
    margin-left: 0;
    margin-right: 0;
    margin-top: 70px;
}
div.w2dc-content .w2dc-fields-group .w2dc-fields-group-caption {
    font-weight: normal;
}
.w2dc-big-slide {
  background-position:50% 50%;
  background-repeat:no-repeat;
  background-size:cover;
  overflow:hidden;
  text-align:center;
}
.w2dc-big-slide-wrapper {
  background:none 0 0 repeat scroll #FFFFFF;
  border:5px solid #FFFFFF;
  box-shadow:#ffffff 0 0 5px;
  margin-bottom:20px;
  overflow:hidden;
  transform:translateZ(0px);
}
.wp-caption {
background-color:transparent !important;
}
img.alignleft, img.alignright, img.aligncenter {
    margin-bottom: -12px;
}
.w2dc-content.w2dc-search-form {
  border-radius:0px;
  margin-bottom:20px;
}
.w2dc-content .w2dc-btn {
  -webkit-user-select:none;
  background-image:none;
  border:1px solid transparent;
  border-radius:0px;
  cursor:pointer;
  display:inline-block;
  font-size:14px;
  font-weight:normal;
  line-height:1.42857143;
  margin-bottom:0;
  padding:6px 12px;
  text-align:center;
  vertical-align:middle;
  white-space:nowrap;
}
.w2dc-search-section-label {
  font-family: "Open Sans Condensed",Arial,Helvetica,sans-serif;
  font-size: 1.7em;
  text-shadow: 0 1px 1px #000000;
  font-style: normal;
  line-height: 2em;
border:1px solid transparent;
  border-radius:0;
  line-height:1.42857143;
  margin-right:2px;
}
.vc_separator h4 {
  display:table-cell;
  font-size:20pt;
  line-height:1em;
  white-space:pre;
}
main-color *::-moz-selection {
    background-color: #000000;
    color: #ffffff;
}
.alternate-color .kleo_ajax_results h4 span {
    background-color: #000000;
}
#main .main-color h1, #main .main-color h2, #main .main-color h3, #main .main-color h4, #main .main-color h5, #main .main-color h6 {
    color: #666666;
}
.vc_separator h4 {
    display: table-cell;
    font-size: 18pt;
    line-height: 1em;
    white-space: pre;
}
.w2dc-content {
  font-size:16px;
}
.w2dc-search-section-label {
    font-family: "Open Sans Condensed",;
    font-size: 1.5em;
    font-style: normal;
    line-height: 2em;
    text-shadow: 0 0px 0px #000000;
}
.single .container .with-meta .article-content, .posts-listing.standard-listing.with-meta .article-content {
  margin-left: 0px !important;
}
article .article-meta {
  width: auto !important;
  float: left !important;
  text-align: center !important;
  margin-left: 240px !important;
}
.entry-content .dropcap {
    color: #e977af;
    float: left;
    font-size: 5.71429rem;
    line-height: 0.75;
    margin-top: 6px;
    padding-right: 0.857143rem;
    text-transform: uppercase;
}
.posts-listing.standard-listing.with-meta.inline-meta .article-meta .post-meta {
  float: right !important;
  margin-left: -100px;
}
.template-page.col-sm-8.tpl-right.with-meta .article-meta {
  margin-top: 0px !important;
  position: absolute;
}
div#shr_canvas2 {
  padding-bottom: 50px;
}
@media (max-width: 991px) {
.template-page.col-sm-8.tpl-right.with-meta .article-meta {
  margin-left: 110px !important;
}
}
#main-container .article-content {
  padding-top: 50px !important;
  float: none;
  width: auto;
  border: 0;
  background: transparent;
}

To your style.css

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you

[taiger]

Hi thank you so far. We are still not happy with the way the meta displays, it position is rather random and would be great id it was integrated better.

We are now live, and i had to disable it until we can get a fix

[taiger]

This reply has been set as private.

[taiger]

This reply has been set as private.

[taiger]

This reply has been set as private.

[Laura]

Hello, go to Theme Options > General, scroll down to find quick css, there you can disable the codes

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you

[taiger]

This reply has been set as private.

[Author]

Posts