mobile display

• 

  admin81502891 · Member · Jun 20, 2017 at 1:29 pm

  • Copy link
  • Add topic to favorites

  About Mobile Display

  Current,
  Main content ↓
  Left widget ↓
  Right widget ↓

  Although it is displayed in the order of.

  Left widget ↓
  Main content ↓
  Right widget ↓
  I want to display in this order.
  want to change

  I will use the Chrome browser with android.
  It is displayed in the same way as the desktop version.
  Left widget
  Main content
  Right Widget
  (Portrait orientation)
  I would like to change it to change.

  Is there a good way to do that?

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

• 

  thesacredpath · Member · Jun 20, 2017 at 6:28 pm

  • Copy link

  Hi, on Mobile, you want the left widget area to display above the main content and the right widget area below the main content? Is that correct?

• 

  admin81502891 · Member · Jun 21, 2017 at 2:15 am

  • Copy link

  That is my hope.

• 

  admin81502891 · Member · Jun 21, 2017 at 2:21 am

  • Copy link

  Please lend me wisdom to make it possible.
  Thank you.

• 

  thesacredpath · Member · Jun 21, 2017 at 6:37 am

  • Copy link

  Hi, the following custom CSS will do this, but first off I need to mention that this will not work on any version of Internet Explorer older than version 10. Version 9 and older do not support this. Place this at the very bottom of your custom CSS.

  @media screen and (max-width: 799px) {
  .site-content {
  	display: flex;
  	display: -webkit-box;
  	display: -moz-box;
  	display: -ms-flexbox;
  	display: -webkit-flex;
  	-webkit-flex-direction: column;
  	-moz-flex-direction: column;
  	-ms-flex-direction: column;
  	flex-direction: column;
  	-webkit-box-orient: vertical;
  	-moz-box-orient: vertical;
  	-ms-box-orient: vertical;
  	box-orient: vertical;
  }
  #secondary {
  	-webkit-box-ordinal-group: 1;
  	-moz-box-ordinal-group: 1;
  	-ms-flex-order: 1;
  	-webkit-order: 1;
  	order: 1;
  }
  #primary {
  	-webkit-box-ordinal-group: 2;
  	-moz-box-ordinal-group: 2;
  	-ms-flex-order: 2;
  	-webkit-order: 2;
  	order: 2;
  }
  #tertiary {
  	-webkit-box-ordinal-group: 3;
  	-moz-box-ordinal-group: 3;
  	-ms-flex-order: 3;
  	-webkit-order: 3;
  	order: 3;
  }
  }

• 

  admin81502891 · Member · Jun 21, 2017 at 9:13 am

  • Copy link

  Thank you very much.
  I have one request.

  Is there a way to hide HOME etc on the top of the left widget on mobile?

• 

  thesacredpath · Member · Jun 21, 2017 at 7:04 pm

  • Copy link

  Add this to the bottom of that Media Query we used to reorder the sidebars and content

  #text-34 {
  	display: none;
  }

  so it looks like this (see bottom).

  @media screen and (max-width: 799px) {
  .site-content {
  	display: flex;
  	display: -webkit-box;
  	display: -moz-box;
  	display: -ms-flexbox;
  	display: -webkit-flex;
  	-webkit-flex-direction: column;
  	-moz-flex-direction: column;
  	-ms-flex-direction: column;
  	flex-direction: column;
  	-webkit-box-orient: vertical;
  	-moz-box-orient: vertical;
  	-ms-box-orient: vertical;
  	box-orient: vertical;
  }
  #secondary {
  	-webkit-box-ordinal-group: 1;
  	-moz-box-ordinal-group: 1;
  	-ms-flex-order: 1;
  	-webkit-order: 1;
  	order: 1;
  }
  #primary {
  	-webkit-box-ordinal-group: 2;
  	-moz-box-ordinal-group: 2;
  	-ms-flex-order: 2;
  	-webkit-order: 2;
  	order: 2;
  }
  #tertiary {
  	-webkit-box-ordinal-group: 3;
  	-moz-box-ordinal-group: 3;
  	-ms-flex-order: 3;
  	-webkit-order: 3;
  	order: 3;
  }
  #text-34 {
  	display: none;
  }
  }

• 

  admin81502891 · Member · Jun 22, 2017 at 1:39 am

  • Copy link

  Great.
  Thank you very much.

  Would you like to do that again?

  I would like to set a margin between the article and the article with a horizontal white color (because the background of the main content is light green).

• 

  admin81502891 · Member · Jun 22, 2017 at 1:40 am

  • Copy link

  This is about the desktop.

• 

  thesacredpath · Member · Jun 22, 2017 at 7:06 am

  • Copy link

  I’m not sure I’m following you correctly, but what I think you want is a white space between the posts like on the widgets on the left and right. See if this is what you are looking for.

  @media screen and (min-width: 800px) {
  .blog .hentry:after {
  	border-bottom: 30px solid #fff;
  	display: block;
  	height: 2em;
  }
  .blog .hentry {
  	margin-bottom: 0;
  }
  }

• 

  admin81502891 · Member · Jun 22, 2017 at 9:49 am

  • Copy link

  Thank you very much.
  It is operating normally.

  One more thing?

  About the desktop version.
  Header image size is obviously too small.
  Is it possible to make this full width?

  Many apologies.
  Please lend me your wisdom.

• 

  thesacredpath · Member · Jun 22, 2017 at 6:02 pm

  • Copy link

  Hi, for your logo, due to the nature of it, with the text in it, adding to full width on a responsive designed theme such as you are using would be difficult. We can make it larger than it is with the following CSS.

  @media screen and (min-width: 40.063em) {
  	.site-logo {
  		max-height: 150px;
  	}
  }

  The other suggestion would be to take the yellow/green background and make that as a separate image which could then be added to the header background area, and also make a logo image that is just the text and the person as a PNG image with a transparent background. It could then be floated over the top of the background yellow/green image.

  If you wish to try the above, create the images and upload them to your media library and then post the URLs of those two images and I would be happy to see what I can do for you.

• 

  admin81502891 · Member · Jun 22, 2017 at 11:59 pm

  • Copy link

  Do I need to recreate the two types of images?

  The first one is a text only image with a transparent background.
  The second image is only the image of the person on the current background.

  Is this correct?

• 

  admin81502891 · Member · Jun 23, 2017 at 12:01 am

  • Copy link

  I’m sorry.
  Are both transparent backgrounds?
  Is it two kinds of text and people?

• 

  thesacredpath · Member · Jun 23, 2017 at 12:46 am

  • Copy link

  I would put the person and the text in one image, about the size it is now. The second image would be the green/yellow background, and you would want to make that image about 1120px wide by 150px tall. That will serve as the background for the entire header area. The background green/yellow image does not have to have a transparent background, but you could if you wish since it is going over a white area, it will not matter in this case.

• 

  admin81502891 · Member · Jun 23, 2017 at 1:31 am

  • Copy link

  One image with a background color of 1120 × 150.
  One image of text and person.
  Do I need these?

  I am planning to prepare.

• 

  thesacredpath · Member · Jun 23, 2017 at 3:24 am

  • Copy link

  If you want to try my suggestion, yes, that is what you will need.

• 

  admin81502891 · Member · Jun 23, 2017 at 3:35 am

  • Copy link

  It was understood.
  I want to prepare an image and report it to you again.

• 

  admin81502891 · Member · Jun 23, 2017 at 3:36 am

  • Copy link

  By the way, how many sizes of text and people’s images should I?

• 

  thesacredpath · Member · Jun 23, 2017 at 3:41 am

  • Copy link

  I would make that image 150px tall, and the width is not that important, but probably somewhere around 400-500 pixels wide.