half-width text posts

  • Author
    Posts
  • #162066

    dianamarinstills
    Member
    Original poster

    Hi,

    I am interested in purchasing this theme. I tried the live demo and tried customising it and it looks nice, with one exception: The text of the blog posts on the main / last posts page is half-width, instead of full-width. This only happens with the posts that have a featured image. The text of the posts without a featured image show up full-width, as I would like all of them to be. Before buying the theme, I would like to know whether there is a way to change this.

    Thank you.

    The blog I need help with is: dianamarin.com

    #162067

    ricardpriet
    Theme Author

    Hello Diana,
    Thank you for writing.

    Posts will adapt automatically according to shape and orientation of the Featured Image you set — portrait, landscape, or square. If you don’t set a Featured Image to the post, it will show centered on the homepage.

    You have three options.

    If you upload a landscape image (same width and height) as featured image, you will have the layout number one.

    If you upload a landscape image (more width than height) as featured image, you will have the layout number two.

    If you upload a portrait image (more height than width) as featured image, you will have the layout number three.

    Here you have how to add a Featured Image: https://en.support.wordpress.com/featured-images/

    And here you have the different orientations and their layout:
    https://theme.files.wordpress.com/2015/11/jannice-flexible-layout.jpg?w=640&h=600

    Hope this helps.
    Thank you again!
    Ricardo P. from SiloCreativo

    #162068

    dianamarinstills
    Member
    Original poster

    Hi Ricardo,

    I am interested in the second layout. Even in the image you posted, the text from the second layout doesn’t march the width of the image; it is not full-width and centred, like it is in the posts without a featured image. Is it possible to modify this?

    Thanks

    #162069

    dianamarinstills
    Member
    Original poster

    Hi Ricardo,

    I am interested in the second layout. Even in the image you posted, the text from the second layout doesn’t match* the width of the image; it is not full-width and centred, like it is in the posts without a featured image. Is it possible to modify this?

    Thanks

    #162071

    ricardpriet
    Theme Author

    Hello Diana,
    ok, I see your point.

    Yes, it is possible but using custom CSS (we provide you the necessary code to add).
    However only users with certain plans can use this feature of adding custom CSS. See more here:
    https://wordpress.com/support/editing-css/

    Please let me know on order to prepare the code.

    Thank you,
    Ricardo

    #162106

    dianamarinstills
    Member
    Original poster

    Hi,

    Ok, I upgraded to Premium so I have the theme now and I can add Custom CSS.

    Thanks.

    #162117

    ricardpriet
    Theme Author

    Hello Diana,

    Fantastic. Here you are the code:

    @media (min-width: 768px) {
        .bg-lf.post.has-post-thumbnail .janice-grid-post {
            width: 70%;
            margin-left: 15%;
            margin-right: 15%;
        }
    }
    @media (min-width: 992px) {
        .bg-lf.post.has-post-thumbnail .janice-grid-post {
            width: 70%;
            margin-left: 15%;
            margin-right: 15%;
        }
    }

    This code works for the second layout. Do you want a code for the first and third layout in case in the future you upload a square or vertical image as featured image and you don’t want to use the default layout?

    Anyway, when this happens just ping us and we will provide the code.

    Please, let us know if the CSS works correctly. Here you are how to add it:
    https://wordpress.com/support/editing-css/

    Thank you,
    Best,
    Ricardo

    #162119

    dianamarinstills
    Member
    Original poster

    Thank you very much, it works! Yes, I would like to have the others too, just in case!

    #162123

    ricardpriet
    Theme Author

    Fantastic, nice to hear that :)

    Add CSS this to make all post layouts match with your design:

    .sm-lf.has-post-thumbnail .janice-grid-post .entry-meta, .sm-rg.has-post-thumbnail .janice-grid-post .entry-meta {
        margin-top: 0;
    }
    @media (min-width: 768px) {
        .md-lf.has-post-thumbnail .entry-thumbnail {
            width: auto;
            float: none;
        }
        .md-lf.post.has-post-thumbnail .janice-grid-post {
            width: 70%;
            margin-left: 15%;
            margin-right: 15%;
        }
        .md-lf .janice-grid-post .entry-header {
            margin-top: -40px;
            margin-left: 0;
            width: auto;
        }
        .sm-rg.has-post-thumbnail .entry-thumbnail {
            width: auto;
            float: none;
            margin: 0;
        }
        .sm-rg.has-post-thumbnail .janice-grid-post {
            width: 70%;
            margin-left: 15%;
            margin-right: 15%;
            position: relative;
        }
        .sm-rg.has-post-thumbnail .janice-grid-post .entry-header {
            position: relative;
            bottom: initial;
            margin: 0;
            text-align: left;
            margin-left: 0;
            width: auto;
            margin-bottom: 0;
            margin-top: -30px;
        }
        .sm-rg.has-post-thumbnail .janice-grid-post h1.entry-title {
            margin-bottom: 15px;
        }
    }
    @media (min-width: 992px) {
        .md-lf.has-post-thumbnail .entry-thumbnail {
            width: auto;
            float: none;
        }
        .md-lf.post.has-post-thumbnail .janice-grid-post {
            width: 70%;
            margin-left: 15%;
            margin-right: 15%;
        }
        .md-lf .janice-grid-post .entry-header {
            margin-top: -40px;
            margin-left: 0;
            width: auto;
        }
        .sm-rg.has-post-thumbnail .entry-thumbnail {
            width: auto;
            float: none;
            margin: 0;
        }
        .sm-rg.has-post-thumbnail .janice-grid-post {
            width: 70%;
            margin-left: 15%;
            margin-right: 15%;
            position: relative;
        }
        .sm-rg.has-post-thumbnail .janice-grid-post .entry-header {
            position: relative;
            bottom: initial;
            margin: 0;
            text-align: left;
            margin-left: 0;
            width: auto;
            margin-bottom: 0;
            margin-top: -30px;
        }
    }

    Thank you again and congratulations for you lovely site :)
    Best,
    Ricardo

    #162125

    dianamarinstills
    Member
    Original poster

    Thank you. :)
    Let me know if there is a solution for my other issue too

    Kind Regards,
    Diana

    #162132

    ricardpriet
    Theme Author

    Hello Diana,

    oh yes, I think this CSS can help:

    .md-lf.post.has-post-thumbnail .entry-thumbnail,
        .sm-rg.post.has-post-thumbnail .entry-thumbnail,
        .bg-lf.post.has-post-thumbnail .entry-thumbnail,
        .janice-grid-post .entry-thumbnail {
        width: 90%;
        margin-left: 5%;
        margin-right: 5%;
    }
    .md-lf.post.has-post-thumbnail .janice-grid-post .entry-header,
    .sm-rg.post.has-post-thumbnail .janice-grid-post .entry-header,
    .bg-lf.post.has-post-thumbnail .janice-grid-post .entry-header,
    .md-lf.post.has-post-thumbnail .janice-grid-post .entry-header {
        margin-top: 0;
    }
    @media (min-width: 768px) {
        .md-lf.post.has-post-thumbnail .entry-thumbnail,
        .sm-rg.post.has-post-thumbnail .entry-thumbnail,
        .bg-lf.post.has-post-thumbnail .entry-thumbnail,
        .janice-grid-post .entry-thumbnail {
            width: 70%;
            margin-left: 15%;
            margin-right: 15%;
        }
        .md-lf.post.has-post-thumbnail .janice-grid-post .entry-header,
        .sm-rg.post.has-post-thumbnail .janice-grid-post .entry-header,
        .bg-lf.post.has-post-thumbnail .janice-grid-post .entry-header,
        .md-lf.post.has-post-thumbnail .janice-grid-post .entry-header {
            margin-top: 0;
        }
    }
    
    @media (min-width: 992px) {
        .md-lf.post.has-post-thumbnail .entry-thumbnail,
        .sm-rg.post.has-post-thumbnail .entry-thumbnail,
        .bg-lf.post.has-post-thumbnail .entry-thumbnail,
        .janice-grid-post .entry-thumbnail {
            width: 70%;
            margin-left: 15%;
            margin-right: 15%;
        }
        .md-lf.post.has-post-thumbnail .janice-grid-post .entry-header,
        .sm-rg.post.has-post-thumbnail .janice-grid-post .entry-header,
        .bg-lf.post.has-post-thumbnail .janice-grid-post .entry-header,
        .md-lf.post.has-post-thumbnail .janice-grid-post .entry-header {
            margin-top: 0;
        }
    }

    Please let us know :)

    #162133

    dianamarinstills
    Member
    Original poster

    Hi, this one didn’t work :(
    just to be sure, I’m talking about wanting the text that is aligned to the right side of an image to move below the image on a phone screen- otherwise, it’s one letter per line.

    #162135

    ricardpriet
    Theme Author

    Sorry! I didn’t read the other topic.

    I though you want the featured image doesn’t grow out the text area as you posted here: https://premium-themes.forums.wordpress.com/topic/half-width-text-posts/#post-162068

    I though you are referring this as the “other issue”. Just ignore this code: https://premium-themes.forums.wordpress.com/topic/half-width-text-posts/#post-162132

    Sorry for the misunderstood :)

    Ricardo

The topic ‘half-width text posts’ is closed to new replies.