How can I align blog image, title, and text on my page?

Store Design
, , , ,
1

Hi there,

On each of my Shopify blog pages, you will see that the main image at the top, the blog title and the blog content/text are all not in line. Please could someone help me bring the blog image, title and main text all in line? Here’s an image detailing what I would like to be aligned (see arrows): https://ibb.co/2FXzkQs

I think this can be resolved with some simple CSS for my blog page.

Link to example blog page with the issue: https://tradewarehouse.co.uk/blogs/garden/is-a-metal-shed-cheaper-than-a-wooden-shed-ultimate-guide

Kind regards,

Elliot

2

Hello @elliotmch1

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.css file

  3. Find class (.blog-container) and replace the below code
    .blog-container {
    display: flex;
    align-items: flex-start;
    justify-content: unset;
    }

  4. Find class (.article__inner) and replace the below code
    .article__inner {
    max-width: 681px;
    margin: unset;
    }

3

Thank you. Also, it seems when I switch to mobile/tablet, the image overlays the text. Is there some CSS to ensure the text remains under the image / to fix this formatting issue. You can see an image of the issue here: https://ibb.co/tsBKZ9g

Cheers

Elliot

4

Hello @elliotmch1

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.css file

  3. Find class (.blog-container) and replace the below code
    @media screen and (max-width:991px){
    #shopify-section-template–20639825166646__main .article__image-wrapper {
    width: 100%;
    float: unset !important;
    margin-bottom: 30px;
    }
    #shopify-section-template–20639825166646__main .article__inner {
    max-width: 100%;
    margin: unset;
    }
    }
    My solution worked then please like and accepted solution .