Blog post image

Support
#1

How do i have the image on my blog post appear above the title only on mobile tho? Currently I have it on the right side in my blog post but when i go down to mobile in stack below and i would like it to stack above the title on my blog

#2

Hi @123JH,

We can achieve that using the Hide During Breakpoin option:

  • Create an image above the title then hide it on desktop & tablet.
  • Then hide the right image on mobile.

Hope it helps :slight_smile:

#3

That helps a lot, however, the title is automatically generated on the blog post so when i do that it only appears below the title and categories…is there anyway I can disable the title/category section on my blog posts?

#4

Hi Carolina,

You mean the title and category within your blog index page? If yes, then please add this CSS to Theme Options > CSS

.blog .entry-title, .blog .p-meta span:first-child {
display: none !important; 
}

Or, if it’s meant for single blog post, then it should be this

.single-post .entry-title, .single-post .p-meta span:first-child {
display: none !important; 
}

Hope this helps.

#5

Unfortunately that does not help, I want all 6 posts on my homepage to match the font style i have on my media page…I also want that when you hover on the homepage image to match what i have on my media page that when you hover it says read more

#6

Hey Carolina,

First, please follow Thai’s suggestion to the image in your content using the Hide During Breakpoints feature.

Now the the image inside the content is taken care off, un-hide the featured image in mobile only. You’re currently using this custom CSS.

.single-post .entry-featured {
    display: none;
}

Wrap it inside a media query that will apply the CSS only in a certain screen size and above like:

@media (min-width:481px) {
    .single-post .entry-featured {
        display: none;
    }
}

I’d recommend that you adjust the media query according to the predefined breakpoints.

Hope that helps.

#7

I dont know if I’m making sense, but i just want the image on mobile to below the title/categories section. Currently the image is on the right side and on mobile it goes down on the bottom of the post but i want it below the title/categories section on mobile only. I thought that a part of it was this: .right-to-left{
direction: rtl;
}

.right-to-left .x-column{
direction: ltr;
}

but that does not work, or im doing something wrong, is it about just having 2 images and hiding one?

#8

Hi again,

Thank you for the detailed write-up. To achieve this, please add the following code in the Theme Options > CSS:

@media screen and (max-width: 767px) {
    .single-post .x-section .x-container {
        display: flex;
        flex-direction: column-reverse;
    }
}

Or a better solution would be to give your main section a class e.g reverse-order and then you can use the following code:

@media screen and (max-width: 767px) {
    .x-section.reverse-order .x-container {
        display: flex;
        flex-direction: column-reverse;
    }
}

To learn more about Flexbox, please see https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.