WordPress.org

Ready to get started?Download WordPress

Forums

Flexible Posts Widget
[resolved] Images and titles pushed left (8 posts)

  1. shawerlander
    Member
    Posted 3 months ago #

    Hello,

    I just installed this plugin and I love it but I'm having what I hope is a small problem with an easy fix.

    I'm using this plugin simply to display the most recent blog posts with their image. They are pulling in fine, but the images and titles are all shifted to the left.

    Here's a page to check out: http://dereklauber.com/10-proven-ways-to-spring-clean-your-mind/

    I'm using the Epik responsive theme.

    Please let me know what I need to do to correct how these display (please not I am a business owner and not a developer, but I can adjust code given good guidance).

    Many thanks!
    Sara

    https://wordpress.org/plugins/flexible-posts-widget/

  2. czargyle
    Member
    Posted 3 months ago #

    Hi Sara,

    I think something like this will work if you add it to your CSS:

    .dpe-flexible-posts a img {
        float: left;
        width: 100%;
        margin: 0 0 0.5rem;
    }
    
    .dpe-flexible-posts a .title {
        margin: 1rem;
    }
    
    @media only screen and (max-width: 767px) {
    
        .dpe-flexible-posts a img  {
            width: auto;
            margin: 0 1rem 0 0;
        }
    
    }
    
    @media only screen and (max-width: 480px) {
    
        .dpe-flexible-posts a img  {
            width: 100%;
            margin: 0 0 0.5rem;
        }
    
    }

    You might want to select a slightly bigger image size because it stretches things juuuust a little. If you do that, though, you also might want to change width: auto in the first media query to a set pixel value. It really depends on how big the image would be.

  3. shawerlander
    Member
    Posted 3 months ago #

    Hi czargyle,

    Thank you so much for your response. Is there a particular section it would make the most sense to add this code to? Would it be ok to add to the Plugins section even though there isn't other code for this plugin there... or under Miscellaneous.. or Sidebar?

    I appreciate your guidance!!
    Thank you,
    Sara

  4. czargyle
    Member
    Posted 3 months ago #

    Oh, no problem at all. I always appreciate any help I get, so it's nice to help someone else.

    As for your new question, I'm actually taken aback by how thoughtful you are about where to put the CSS, haha... you could really put it wherever makes sense to you, but actually, if you put it in style.css, any time you update your theme, your changes will probably get overwritten. So, you could ask the Epik theme developer if there is a special place to put custom CSS that is update friendly.

    Alternatives to that:

    If you use Jetpack, you could enable the Custom CSS module. Otherwise, here are a couple of the simplest plugins (they're basically the same, so pick whichever you prefer):

    http://wordpress.org/plugins/simple-custom-css/
    http://wordpress.org/plugins/custom-css-by-dev7studios/

    Whether you go the Jetpack route or one of the above plugins, a new Custom CSS menu item will be created under Appearance, and if you copy and paste the above code in there and save, that should be all there is to it.

  5. shawerlander
    Member
    Posted 3 months ago #

    I had no idea there were plugins for custom css!!

    I think I will send a note to the guys at Epik theme and also check into these plugins.

    Again, thank you so much for your friendly help. I should be good from here.

    Best,
    Sara

  6. DaveE
    Member
    Plugin Author

    Posted 3 months ago #

    Glad to see this got resolved. Thanks again for the help, czargyle. Much appreciated!

  7. shawerlander
    Member
    Posted 3 months ago #

    Just to close out on my end, I uploaded the simple custom css plugin, copy and pasted the code provided by czargyle and everything lined up perfectly with the existing image sizes. Easy-peasy!

  8. czargyle
    Member
    Posted 3 months ago #

    Glad it worked out. Looks good!

Reply

You must log in to post.

About this Plugin

About this Topic

Tags