CSS for showing title first, than featured image

  • Author
    Posts
  • #3046462

    mrdhondt
    Member

    Hi!

    Is there a CSS to show the title of a blog post first and then the featured image?

    The blog I need help with is mrdhondt.com.

    #3046652

    Yes we can do this, and it will work in all modern browsers, but in the case if Internet Explorer, only on version 10 and later (including Edge).

    Did you only want to do this on the blog page, or also on the category/tag/date archive pages?

    #3046784

    i want to do this only on category pages

    #3046795

    Ok, add the following to the bottom of your custom CSS. I’ve set this to affect only the category pages for you.

    .category .grid-wrapper .post {
    	display: flex;
    	flex-direction: column;
    	box-orient: vertical;
    	display: -webkit-box;
    	-webkit-flex-direction: column;
    	-webkit-box-orient: vertical;
    	display: -webkit-flex;
    	display: -moz-box;
    	-moz-flex-direction: column;
    	-moz-box-orient: vertical;
    	display: -ms-flexbox;
    	-ms-flex-direction: column;
    	-ms-box-orient: vertical;
    }
    .category .grid-wrapper .post .entry-header {
    	-webkit-box-ordinal-group: 1;
    	-moz-box-ordinal-group: 1;
    	-ms-flex-order: 1;
    	-webkit-order: 1;
    	order: 1;
    }
    .category .grid-wrapper .post .featured-image {
    	-webkit-box-ordinal-group: 2;
    	-moz-box-ordinal-group: 2;
    	-ms-flex-order: 2;
    	-webkit-order: 2;
    	order: 2;
    }
    .category .grid-wrapper .post .entry-content {
    	-webkit-box-ordinal-group: 3;
    	-moz-box-ordinal-group: 3;
    	-ms-flex-order: 3;
    	-webkit-order: 3;
    	order: 3;
    }

    #3046800

    mrdhondt
    Member

    Hi there!

    Is there maybe a CSS to also center my Pinterest (profile) board. You can see this at ‘INSPIRATION’ in my SHOP submenu.

    Thanks!

    #3046801

    wdn2020
    Member

    It cannot be done with CSS.

    The issue I am seeing here is the <div class = “col-md-9 has-sidebar”> that contain the Pinterest Profile. Easiest way is edit out that line. But I am not sure if you can do that. Maybe disabling the sidebar on that page may help.

    #3046821

    kathrynwp
    Staff

    Is there maybe a CSS to also center my Pinterest (profile) board. You can see this at ‘INSPIRATION’ in my SHOP submenu.

    Sure, this can be done. Add this to your custom CSS:

    /* Center Inspiration page */
    .page-id-2887 .entry-content {
      text-align: center;
    }

The topic ‘CSS for showing title first, than featured image’ is closed to new replies.