Putting images and text side by side on blog for mobile

Site URL: https://www.bonbonfusion.com.au/blog/lifestyle

Hi,

I want my blog to appear on mobile like it appears on desktop. I would like the image thumbnail to appear on the left hand side, while the blog title, excerpt and date are on the right. https://www.bonbonfusion.com.au/blog/lifestyle

In mobile view the image appears stacked on top of each other instead of in rows.

Thanks in advance!

On 4/6/2022 at 6:13 PM, StarzanReyne said:

Site URL: https://www.bonbonfusion.com.au/blog/lifestyle

Hi,

I want my blog to appear on mobile like it appears on desktop. I would like the image thumbnail to appear on the left hand side, while the blog title, excerpt and date are on the right. https://www.bonbonfusion.com.au/blog/lifestyle

In mobile view the image appears stacked on top of each other instead of in rows.

Thanks in advance!

Add to Design > Custom CSS

.blog-side-by-side .blog-image-wrapper {
    width: 40% !important;
    margin-right: 6% !important;
    margin-bottom: 0 !important;
}
.blog-side-by-side .blog-item-summary {
    width: calc(100% - 40% - 6%) !important;
}
.blog-side-by-side .blog-item {
    display: flex !important;
    align-items: flex-start !important;
}

Thanks, Tuan. Is it possible to have the title and date of the blog to the right and then the excerpt below both of them. 

So, the layout would look like this:

Image - Title/Date

Excerpt

Right now, the excerpt looks a little strange cropped to the right. 

On 4/13/2022 at 8:05 AM, StarzanReyne said:

Thanks, Tuan. Is it possible to have the title and date of the blog to the right and then the excerpt below both of them. 

So, the layout would look like this:

Image - Title/Date

Excerpt

 

Right now, the excerpt looks a little strange cropped to the right. 

I think you need to use JavaScript code to achieve this. If you use a Business Plan or higher, let me know, we will try testing some code