Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #546197

    Hi,
    I would like to see a way to view blog posts with a medium sized picture on the left and title and excerpt on the right.
    I have found some discussions on this, but cannot seem to find one that works and that is not too complicated.
    Thanks

    #546287

    Hey Jon Erik,

    Could you provide us with a link to the site in question so that we can take a closer look please? What solutions have you tried already?

    Thanks,
    Rikard

    #546710

    Thanks Richard,
    My website has not launched yet, but I can send you a temporary user in the private section. I have removed what I experimented with so far, though, to clean it out.
    I was thinking something like amyporterfield.com or draxe.com. I would just assume this layout would be something many people want.

    I have tried different things in css, but I found it was not easy to get it right and it was not very consistent. For instance when making the browser smaller, the text left “margin” moved towards the picture and I part of the picture became gray.

    This is what I took out:
    .big-preview.single-big {
    float: left;
    clear: both;
    margin-right: 3%;
    height: auto !important;
    width: 100% !important;
    }

    .entry-content-wrapper.clearfix.standard-content {
    width: 70%;
    float: right;
    }

    #top .fullsize .template-blog .blog-meta {
    float: left;
    width: 50%;
    }

    .home .fullsize .template-blog .post .entry-content-wrapper {
    margin-top: 0;
    width: 70%;
    float: right;
    }

    .home .fullsize .template-blog .blog-meta {
    float: left;
    width: 70%;
    }

    .home .fullsize .template-blog .post-title, .home .fullsize .template-blog .post-meta-infos {
    text-align: left;
    }

    #top .flex_column .template-blog .post-title, #top .fullsize .template-blog .post-meta-infos { text-align: left; }

    .home .entry-content-wrapper { margin-top: 0!important; }
    .home .entry-content-wrapper h2.post-title.entry-title { padding-top: 1px!important; }

    @media only screen and (max-width: 989px) and (min-width: 768px) {
    .home .fullsize .template-blog .post .entry-content-wrapper {
    width: 80%;
    }
    }

    .small-preview, #top .fullsize .template-blog .blog-meta {
    width: 230px;
    height: 230px;
    }

    #547222

    Posting logon info in the private content section

    #548301

    Hi!

    I checked your blog and it seems to be exactly what you described in your first post:

    View post on imgur.com

    So not sure what you want to change. Could you fix it already? If not please provide us a mockup showing the result you want to achieve. Use imgur.com or dropbox.

    Regards,
    Andy

    #549305

    Hi Andy,
    I reverted back to the original single author, small preview picture.
    I would like a larger image on the left hand side, like in the example web-pages I mentioned (draxe.com or amyporterfield.com).
    Thanks,
    Jon Erik

    #552475

    Hey!

    use this code in Quick CSS field:

    a.small-preview {
    width: 150px;
    height: auto;
    }
    

    and adjust width value as needed.

    Cheers!
    Andy

    #552510

    Thank you Andy,
    That seemed to work up to width of 180.
    If I make it wider, it adds an extra grey padding on the right hand side. See picture.
    https://drive.google.com/file/d/0Bzn5L_7zPV0YMkpNVW95d003Ukk/view?usp=sharing

    I was thinking 250 would look good.
    Is there a way to move the dotted line a little to the right also, or remove it completely.

    I have been concerned with my “latest blogs” page. I also have a blog list on my home page. The setup is exactly the same as far as I can see but here the images are small and it is centered over the text. Why would it be different?
    https://drive.google.com/file/d/0Bzn5L_7zPV0YdTFYN0Z1TzVvR2c/view?usp=sharing

    Take care,
    Jon Erik

    • This reply was modified 8 years, 11 months ago by InsightDezign.
    #552954

    Hi!

    then you need to add max-width value as well, try this:

    a.small-preview {
    width: 150px;
    height: auto;
    max-width: 190px;
    }
    

    and adjust as needed.

    Regards,
    Andy

    #553726

    Thanks Andy,
    I tried with 250 and it did not work. No change. Anything else I have to think about?

    Any thought on my other questions
    1. moving the dotted line
    2. why blog list pictures look very different on another page

    Regards,
    Jon Erik

    #554509

    Hi!

    would be best for this forum to separate different questions into different tickets. So let’s tick to one problem in one thread only.

    Try to add this code into Quick CSS a well:

    .blog-meta {
    width: 250px !important;
    }
    

    and let me know if this helps you.

    Best regards,
    Andy

    #554533

    Hi Andy,
    That did not make any difference.

    Thanks for the guideline. I will transfer them to new entries. Just felt they were related.

    Jon Erik

    #554581

    Hi!

    I put this code into your Quick CSS field and now it’s working:

    img.attachment-square.size-square.wp-post-image {
    width: 250px !important;
    }
    

    Can you confirm please?

    I think you can remove the other code I provided you again.

    Best regards,
    Andy

    #554790

    Andy,

    It looks good now.

    Thank you.
    Jon Erik

    #554924

    Hi!

    glad we could help. Let us know in a new ticket if you have some more questions related to the theme. We are happy to assist you.

    Best regards,
    Andy

Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.