Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • August 29, 2014 at 11:33 am #310862
    rinkjames

    So I’ve set a blog post content element in a 1/1 layout element on my frontpage and I’ve set it to display a single post with the ‘single author, big preview pic’ option selected. When I try to set a custom preview image size from the drop down menu, it doesn’t seem to matter what I set it to – the result is an image width of 100%. I’m not sure what’s going on. Help? enfold.co.za

    August 29, 2014 at 12:24 pm #310874
    Yigit

    Hey rinkjames!

    Please add following code to Quick CSS in Enfold theme options under General Styling tab

    #top .fullsize .template-blog .big-preview img { width: auto; margin: auto; }

    Cheers!
    Yigit

    August 29, 2014 at 12:50 pm #310884
    rinkjames

    Thanks, the CSS changes the width to natural dimensions but it still doesn’t fix the dropdown selections. If I make the manual preview image size thumbnail 80×80 pixels, nothing happens still. I can change the size as much as I like with CSS but I’d like the original functionality back… I don’t know how it broke.

    EDIT:

    In any case, I intend to use CSS to alter the layout of this post anyway and I could use some help with that too (let me know if I should make a new thread for this).

    I need to change the layout of the post from being vertical to horizontal, but without affecting its responsiveness to different browser widths. I’ve tried some custom CSS already but floating the elements always seems to screw up the responsiveness. Any help? To illustrate, I’d like to go from this: before to this: after. (I made the PNGs in photoshop).

    • This reply was modified 10 years, 10 months ago by rinkjames.
    August 30, 2014 at 12:58 pm #311278
    rinkjames

    bump?

    September 1, 2014 at 5:13 pm #311940
    Yigit

    Hi!

    Please add following code to Quick CSS as well

    #top .fullsize .template-blog .big-preview img { float: left; margin-right: 30px; }

    Cheers!
    Yigit

    September 2, 2014 at 9:50 am #312147
    rinkjames

    Yeah I got that far but I wasn’t able to centre the floated elements without screwing up the responsiveness. Help with that please?

    September 2, 2014 at 12:11 pm #312222
    Yigit

    Hey!

    Please change the code i posted previously to following one

    @media only screen and (min-width: 768px) {
#top .fullsize .template-blog .big-preview img { float: left; margin-right: 30px; }}

    Best regards,
    Yigit

    September 2, 2014 at 12:14 pm #312223
    rinkjames

    Thanks very much, that helped with the narrow widths. The elements still aren’t centered for large widths though. See here

    September 2, 2014 at 12:25 pm #312231
    Yigit

    Hey!

    Please add following code as well

    #top .fullsize .template-blog .post .entry-content-wrapper > *, #top .fullsize .template-blog .post .entry-content-wrapper {
max-width: 100%; }

    Regards,
    Yigit

    September 10, 2014 at 2:50 pm #316623
    rinkjames

    Thanks for the help. This worked for me in the end:

    #top .fullsize .flex_column:first-child .template-blog .big-preview img {
max-width: 57.599999999999994%;
float: left;
}

#top .fullsize .flex_column:first-child .template-blog .post .entry-content-wrapper {
max-width: 36.4%;
float: left;
margin-left: 6%;
}

#top .fullsize .flex_column:first-child .template-blog .post .entry-content-wrapper .post_delimiter {
display: none;
}

@media only screen and (max-width: 767px) {

#top .fullsize .flex_column:first-child .template-blog .big-preview img {
max-width: 100%;
float: none;
}

#top .fullsize .flex_column:first-child .template-blog .post .entry-content-wrapper {
max-width: 800px;
float: none;
margin-left: 0;
}
}
  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Cannot change custom preview image size for single-author blog post’ is closed to new replies.