Feature image above the title

Support
#1

Hello,

Why the feature image i use is appearing above the post title. I want it under the post title. What to do?
This is the URL https://tarekrabaa.com/ar/?p=362

#2

Hello @tarekr,

Thanks for asking. :slight_smile:

You can refer to the solution mentioned in following thread to display featured image after post title:

Thanks.

#3

Hi.
I am using Integrity

#4

Hello @tarekr,

Thanks for updating thread. :slight_smile:

Great, in that case please navigate under /views/integrity/ folder and copy content.php and paste under the same directory in child theme as mentioned in above thread. I am also sharing few resources that you can use to download and setup child theme.

https://theme.co/apex/child-themes

Thanks.

#5

Hi,
Is there another easier way by customizing CSS?
I have already many customizations in the CSS. Will i loose them if i download this new theme?

#6

Hello @tarekr,

You need to make changes in core to make that happen. Also downloading and setting up child theme won’t have any effect as child theme inherit functionalities of parent theme. Please take a look at our KB tutorial on setting up child theme (link shared in preview reply). In that we have discussed the benefits of using child theme to make core changes.

Thanks.

#7

Hello.
I did it and it is now OK as I want. I moved the featured image under the title.
However in the main blog page i am facing a text alignment from LTR instead of RTL. How to change it please.
Please check the link https://tarekrabaa.com/ar/?page_id=53. There is a misalignment between the core text and the title and the featured image.
So is used this code in CSS:
div.entry-wrap {
margin-right:-60px;
}
It is almost aligned but not working on mobile. Any idea how to align the posts, text and images?
However, I would like to know in case ii have new update for the theme, do i need to update the new theme also?

#8

Hi,

You can try this code instead.

.blog .entry-header,
.blog .entry-featured {
   padding:0 60px;
}

Hope that helps

1 Like
#9

thx
It works but it is not responsive. It is solved on Laptop but on mobile there is disalignment

#10

Hello @tarekr,

Please try adding following CSS and let us know how it goes:

@media only screen and (max-width: 500px) {.blog .entry-header, .blog .entry-featured {padding: 0 20px 0 0;}}

Thanks.

1 Like
#11

I works.
Thx for your support. but the last issue is in tablet view, i see the misalignment

#12

Hello @tarekr,

Please try out following CSS:

@media screen and (max-width: 900px) and (min-width: 500px) {.blog .entry-header, .blog .entry-featured {padding: 0 15px 0 0;} .entry-wrap{padding: 0 15px 0 0;}}}

Thanks.

#13

This code works on Tablet but not on mobile view.

#14

Hello There,

To include all the small screen size, please update the code and use this:

@media screen and (max-width: 900px) {
  .blog .entry-header, .blog .entry-featured {
    padding: 0 15px 0 0;
  } 

  .entry-wrap{
    padding: 0 15px 0 0;
  }
}

Please let us know how it goes.

1 Like
#15

Thx.
It works

#16

You’re welcome!
Thanks for letting us know that it has worked for you.

1 Like
#17

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