Relocate sticky on top of the Image-post

  • Author
    Posts
  • #1048785

    analollato
    Member

    Hi everyone, I’m brand new on WordPress and I would like to move my title and byline on top to the picture in my Origin Theme.
    At the moment is positioned on left-bottom.

    I would like to see exactly how appear in the post’s page.

    Here is the CSS code:

    /* Posts
    ————————————————————– */

    .hentry {
    border-bottom: 1px solid #e5e5e5;
    float: left;
    font-size: 1em;
    margin: 0 0 20px 0;
    padding: 0 0 5px 0;
    width: 100%;
    }

    .single .hentry {
    float: left;
    margin: 0 0 30px 0;
    position: relative;
    width: 100%;
    }
    .featured {
    margin-bottom: 20px;
    }
    .sticky .sticky-header {
    float: left;
    width: 30%
    }
    .sticky .byline {
    clear: left;
    }
    .sticky .entry-summary {
    border-left: 1px solid #e5e5e5;
    float: right;
    padding-left: 2.34375%;
    width: 65%;
    }
    .hentry .featured-thumbnail {
    margin-bottom: 25px;
    }
    .hentry .thumbnail {
    float: left;
    margin: 3px 3.90625% 20px 0;
    width: 100%;
    }

    /* Post titles
    ————————————————————– */

    .hentry .entry-title {
    border: none;
    color: #333;
    font-size: 1.230769230769231em; /* 16 / 13 = 1.230769230769231 */
    line-height: 1.3em;
    margin: 0 0 0.6em 0;
    padding: 0px;
    text-transform: uppercase;
    word-spacing: 2px;
    word-wrap: break-word;
    }
    .single .entry-title,
    .page .entry-title {
    font-size: 1.846153846153846em; /* 24 / 13 = 1.846153846153846 */
    margin-bottom: 0.625em;
    }
    .page .entry-title {
    color: #ccc;
    }
    .page .entry-title,
    .single-attachment .entry-title {
    margin-bottom: 1.2em;
    }
    .search .page .entry-title {
    font-size: 1.23077em;
    }
    .entry-title a,
    .entry-title a:visited {
    color: #222;
    }
    .entry-title a:hover {
    color: #dd5424;
    }
    h1.page-title {
    font-size: 180%;
    margin-bottom: 30px;
    }

    __________________________________________

    Anyone can help me?

    Thanks

    The blog I need help with is analollato.wordpress.com.

    #1049081

    You can move the sticky post titles above the featured image on the Origin theme home page using absolute positioning. Here is an example to get you started:

    .sticky {
    	padding-top: 100px;
    	position: relative;
    }
    
    .sticky .sticky-header {
    	position: absolute;
    	top: 0;
    	width: 97%;
    	padding: 3%;
    }
    
    .sticky .entry-summary {
    	border-left: 0;
    	width: 97%;
    	float: none;
    }

    Adjust the numbers until it looks good to you.

The topic ‘Relocate sticky on top of the Image-post’ is closed to new replies.