Viewing 7 replies - 1 through 7 (of 7 total)
  • 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.

    Thread Starter shawerlander

    (@shawerlander)

    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

    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):

    https://www.ads-software.com/plugins/simple-custom-css/
    https://www.ads-software.com/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.

    Thread Starter shawerlander

    (@shawerlander)

    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

    Plugin Author DaveE

    (@dpe415)

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

    Thread Starter shawerlander

    (@shawerlander)

    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!

    Glad it worked out. Looks good!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Images and titles pushed left’ is closed to new replies.