Support » Theme: Olsen Light » Homepage photo/text layout

  • thriftymarina

    (@thriftymarina)


    For the homepage layout, is there any way to get the feature photo on the left with the blogpost text on the right, instead of the photo at the top with the text underneath?

Viewing 9 replies - 1 through 9 (of 9 total)
  • Fotis

    (@markwaregr)

    Hi,
    try this

    .home #content .entry-featured {
       
        max-width: 200px;
        margin: 0 20px 20px 0;
    }

    in your custom CSS box under Customize-▸Additional CSS

    Change the max width and margin to your preference.

    Let me know if you need additional help with this.

    thriftymarina

    (@thriftymarina)

    Unfortunately that’s still keeping it on two seperate lines instead of side by side.

    Fotis

    (@markwaregr)

    Can you share a URL where you have this applied?

    thriftymarina

    (@thriftymarina)

    When I apply the code, it just moves the image to the left but does not affect the text at all, so I removed the code so my image could be centered for now at least. The site is thriftymarina.com. Thank you so much for your help!

    Fotis

    (@markwaregr)

    Hi,
    can you try this instead

    .home #content .entry-featured {
    
        max-width: 200px;
        margin: 0 20px 20px 0;
        float: left;
    }
    .home #content .entry-title {
        text-align: left;
        padding: 0;
    }
    thriftymarina

    (@thriftymarina)

    That worked, thank you so much!! Is there a certain size I should be making all of my photos?

    I was also wondering if there’s a way to get the title to only fall over the text and not the imagine, like here: guitarandlace.com

    Thank you!!

    Fotis

    (@markwaregr)

    Hi,
    Yes use a minimum of the recommended here https://www.cssigniter.com/docs/olsen-light/#image-sizes

    Try this

    
    @media(min-width:767px){
    .home #content .entry-title {
        text-align: left;
        padding-left: 321px!important;
        padding-right: 0;
    }
    .home #content .entry-featured {
        float: left;
        margin-top: -78px;
    }
    }

    in your custom CSS box under Customize-▸Additional CSS

    Thank you! This worked, but also moved over the text on blogposts I have without images, I assume there’s no way around that though?

    I noticed that in the mobile version of my blog now the text and photo are also aligned side by side which doesnt make for the best user experience on a small screen – is there any way to keep it the old way (photo on top, then text) on mobile devices?

    Thank you so much for all your help!

    Fotis

    (@markwaregr)

    Hi there,
    I am guessing your need to have images for all as there in no way we can tell if the image is present or not.
    Also replace this

    .home #content .entry-featured {
    
        max-width: 200px;
        margin: 0 20px 20px 0;
        float: left;
    }
    .home #content .entry-title {
        text-align: left;
        padding: 0;
    }

    with this

    @media(min-width:767px){
    .home #content .entry-featured {
    
        max-width: 200px;
        margin: 0 20px 20px 0;
        float: left;
    }
    .home #content .entry-title {
        text-align: left;
        padding: 0;
    }
    }

    to remove it from mobile

    Let me know if you need additional help with this.

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