Twenty Seventeen: featured images below the title of the post? (on mobile)

• 

  manuschwendener · Member · May 3, 2017 at 8:13 pm

  • Copy link
  • Add topic to favorites

  Hi

  Looking at https://ubblogtest.wordpress.com on my phone I would like the position of the featured images to be between the blog post title and the blog post text – as they are on https://ubblogtest.wordpress.com/alle

  The code I’m using so far:

  .display-posts-listing .alignleft {
  	float: right;
  	margin: 5px 5px 25px 25px;
  }
  
  .display-posts-listing .listing-item {
  	clear: both;
  	padding-bottom: 40px;
  }
  
  .display-posts-listing .listing-item .title {
  	display: block;
  	font-size: 115%;
  	margin-bottom: 15px;
  }
  
  /* http://bit.ly/2oU2d3J */
  .display-posts-listing .excerpt-dash {
  	display: none;
  }

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · May 5, 2017 at 4:10 am

  • Copy link

  Hi, the following will reorder the image, title and excerpt in the display shortcode posts listing on your main page, but it comes with a caveat: Although nearly every browser for the past few years will display things in the new order, users of Internet Explorer 9 and earlier will not see this change since they do not support CSS3 flexbox. Add this below all of your existing CSS.

  @media screen and (max-width: 600px) {
  	#panel1 .display-posts-listing .listing-item {
  		display: -webkit-box;
  		display: -moz-box;
  		display: -ms-flexbox;
  		display: -webkit-flex;
  		display: flex;
  		-webkit-flex-direction: column;
  		-moz-flex-direction: column;
  		-ms-flex-direction: column;
  		flex-direction: column;
  	}
  	#panel1 .panel-content .display-posts-listing .listing-item .title {
  		-webkit-box-ordinal-group: 1;
  		-moz-box-ordinal-group: 1;
  		-ms-flex-order: 1;
  		-webkit-order: 1;
  		order: 1;
  	}
  	#panel1 .panel-content .display-posts-listing .listing-item .alignleft {
  		-webkit-box-ordinal-group: 2;
  		-moz-box-ordinal-group: 2;
  		-ms-flex-order: 2;
  		-webkit-order: 2;
  		order: 2;
  		float: left;
  		margin-left: 0;
  	}
  	#panel1 .panel-content .display-posts-listing .listing-item .excerpt {
  		-webkit-box-ordinal-group: 3;
  		-moz-box-ordinal-group: 3;
  		-ms-flex-order: 3;
  		-webkit-order: 3;
  		order: 3;
  	}
  }

• 

  manuschwendener · Member · May 5, 2017 at 6:06 am

  • Copy link

  Thank you, thesacredpath. I activated the code, but it’s not doing what I need (looking the same on my phone as when I make my browser window narrower): at the point where the picture jumped above the post title (instead of below it), now the theme just stops being responsive.

• 

  thesacredpath · Member · May 5, 2017 at 7:21 am

  • Copy link

  Hmmm, that was working for me. It appears that Firefox is getting confused and when I inspect your site and look at the custom CSS, some of the code was not showing. I’ve gone into your custom CSS and reordered the first CSS rule in the media query and that seems to have taken care of the issue. Check on your systems and phone and make sure, but in my testing all seems to be good.

• 

  manuschwendener · Member · May 5, 2017 at 7:38 am

  • Copy link

  Working perfectly now, thank you very much :-)

  > look at the custom CSS

  I’ve been wondering: is there a best way to sort the instructions? In the sense of: should the media-specific instructions come first? Or the basics (how to display title etc.) first? Or does that not matter at all?

• 

  thesacredpath · Member · May 5, 2017 at 7:01 pm

  • Copy link

  Hooray and you are welcome!

  To some extent, it doesn’t matter how you arrange things in the custom CSS, unless you have two rules the same with different settings. In general, Media Queries are typically put at the end of the CSS, but this isn’t a hard and fast rule really. In some instances, the order of Media Queries can be important when you have more than one, with different min or max widths for the same CSS rules. Sometimes is is a good idea for when you have to make changes later on to comment the CSS by putting a descriptive bit of text before a group of CSS rules. Comments in CSS look like this.
  /*this is a comment in CSS*/
  Here would be an example with the latest change we made.

  /*This styles display post shortcodes*/
  @media screen and (max-width: 600px) {
  	#panel1 .display-posts-listing .listing-item {
  		display:flex;
  		-webkit-flex-direction:column;
  		-moz-flex-direction:column;
  		-ms-flex-direction:column;
  		flex-direction:column
  	}
  	#panel1 .panel-content .display-posts-listing .listing-item .title {
  		-ms-flex-order:1;
  		-webkit-order:1;
  		order:1
  	}
  	#panel1 .panel-content .display-posts-listing .listing-item .alignleft {
  		-ms-flex-order:2;
  		-webkit-order:2;
  		order:2;
  		float:left;
  		margin-left:0
  	}
  	#panel1 .panel-content .display-posts-listing .listing-item .excerpt {
  		-ms-flex-order:3;
  		-webkit-order:3;
  		order:3
  	}
  }

• 

  manuschwendener · Member · May 6, 2017 at 9:15 am

  • Copy link

  Thank you, thesacredpath, very helpful :-)

  I moved the media queries to the end of the CSS now.

• 

  thesacredpath · Member · May 8, 2017 at 2:49 pm

  • Copy link

  You are welcome.