Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • January 20, 2017 at 10:12 am #736320
    domainarchitect

    I would like to know whether it is possible to change the CSS so a blog post’s featured image sits to the left of the content when using the big preview pic option (single author blog).

    I am including a link to a screenshot of what I am trying to accomplish of another website.

    January 21, 2017 at 6:53 am #736716
    Rikard

    Hey domainarchitect,

    I’m not sure if that would be possible, but send us a link to the page where you want to apply this to and we’ll have a look at it.

    Best regards,
    Rikard

    January 21, 2017 at 7:10 am #736726
    domainarchitect

    HI @Rikard, see below

    January 22, 2017 at 6:57 am #736888
    domainarchitect

    I am updating the link

    January 23, 2017 at 1:09 am #737057
    domainarchitect

    Well, I have almost figured it out on my own. I cobbled together the following CSS and added CSS from the elegant theme to get the read more button.

    Is this the best way to accomplish how it looks now? One question I have is how can I make it so the featured blog image appears at 100% width on non-desktop devices?

    /* preview of featured image and blogroll */
    .fullsize .template-blog .big-preview
    {margin: 0 20px 0 0 !important;
    width: 300px;
    height: 250px;
    overflow: hidden;
    float: left;
    object-fit: cover;
    }

    /* fit featured image inside defined width */
    .big-preview img {width:300px !important; height:250px !important; object-fit: cover;}

    /* convert read more to button from link */
    .more-link {
    text-align: center;
    margin: 0px auto 0px auto;
    clear: both;
    width: 125px;
    border: none;
    border-style: solid;
    border-width: 1px;
    padding: 3px 0;
    border-radius: 2px;}
    /* remove arrow from read more link */
    .more-link-arrow { display: none; }

    /* reposition read more button */
    .fullsize .template-blog .post .entry-content-wrapper {text-align:left !important; line-height:24px !important;}

    January 25, 2017 at 2:26 pm #738378
    Yigit

    Hi,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    @media only screen and (max-width: 990px) {
.big-preview.single-big, .big-preview.single-big img {
    width: 100%!important;
}}

    Best regards,
    Yigit

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