Community Forums › Forums › Archived Forums › General Discussion › How to bring post title to below featured image (only for mobile view)
Tagged: genesis sample
- This topic has 6 replies, 2 voices, and was last updated 4 years, 7 months ago by
andytc.
-
AuthorPosts
-
July 20, 2020 at 9:24 am #500201
sashind
ParticipantHow to bring post title to below featured image (only for mobile view). Just like in this website https://www.safalniveshak.com/latest-posts/ .
http://slowequity.com
My website slowequity.com
Currently my post title is above featured image on my homepage(mobile view) I want to bring the title to below featured image (In mobile view) just like in this website - https://www.safalniveshak.com/latest-posts/July 20, 2020 at 3:34 pm #500209andytc
ParticipantThe website example you gave is using monochrome pro with modifications , you are using Genesis sample ?
You could just move the title below the image permanently , as is the case with the example site you gave , but if you really only want it on small mobile screens we'll need to use some smoke and mirrors to achieve that.
What we can do is duplicate the post title in a 'second location' and then show and hide it where we want with CSS in a media query -
First , add this to the child-themes functions.php
//* Adding a second instance of the entry title before the main content - we are using a CSS media query to show and hide this add_action( 'genesis_entry_content', 'genesis_do_post_title' ,8 );
Second , Add this to your CSS
/*switching the post title display location - Hide the title 'after' the post image for larger screens*/ .entry-content .entry-title { display:none; }
And add this media query -
@media (max-width: 480px) { /*switching the post title display - display title 'after' the post image for small screens*/ .entry-content .entry-title { display:block; } /*switch the post title display location - hide the 'default' display for small screens*/ .entry-header .entry-title { display:none; } }
Adjust the media query to suit
July 20, 2020 at 11:56 pm #500215sashind
ParticipantHi, it is working but the computer view is ruined with 2 titles coming out. The mobile view is doing fine.
Also, how to center the title after bringing to below featured page?July 21, 2020 at 3:10 am #500216andytc
ParticipantCan't help you any further , the code is not in place so i can't see. It works for me on a local install of genesis sample.
On the single post view you don't even have an entry title , you have the code below -
<p class="google-fonts-blocks" style="font-family: Arial, Helvetica Neue, Helvetica, sans-serif;font-weight: 700;font-size: 45px;text-align: center;">Stop Reading Newspapers</p>
TBH , i'd be inclined to move the post title below the image for all views as per the example site you gave , why ? because potentially you'll still end up with 2 titles in the code that might be read SEO wise , it could be a negative but i'm not an SEO expert.
July 21, 2020 at 3:12 am #500217sashind
ParticipantThank you so much bro.
July 21, 2020 at 3:17 am #500218sashind
ParticipantOne thing, what's the code if I wish to put the title below the featured image for all devices just like you said. Like the example website
July 21, 2020 at 5:08 am #500219andytc
ParticipantYou can do that as shown below , added to childtheme functions.php - Don't forget to remove the CSS and previous code that I gave you.
Link to studiopress - you'll find other useful add/remove actions here as well -
https://my.studiopress.com/documentation/snippets/entry-header-html5/remove-entry-title/
//* Remove the entry title (requires HTML5 theme support) remove_action( 'genesis_entry_header', 'genesis_do_post_title' ); //* Add back the entry title before the main content with priority add_action( 'genesis_entry_content', 'genesis_do_post_title' ,8 );
-
AuthorPosts
- The topic ‘How to bring post title to below featured image (only for mobile view)’ is closed to new replies.