Reduction of empty space

• 

  carolinemaryweblog · Member · Dec 13, 2016 at 8:47 pm

  • Copy link
  • Add topic to favorites

  Please can you advise me how to reduce the white space between the line and blue circle icon and the text across my site. It is particularly noticeable on the mobile site. Thank you.

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

• 

  eallas · Member · Dec 13, 2016 at 9:32 pm

  • Copy link

  Hi Carolinemaryweblog! Liking the site layout!

  If you can get into the CSS, it looks like the code that controls the area below the line and blue circle looks like this:

  /* entry header */
  
  	.is-singular .entry-header,
  	.has-post-thumbnail.is-singular:not(.home):not(.single-format-image):not(.page-template-eventbrite-index) .entry-header,
  	.page-template-eventbrite-index .page-header,
  	.single-event .entry-header {
  		padding: 3em 0 0;
  		text-align: center;
  	}

  Where it says, “padding: 3em 0 0;” you would need to change the 3 to a lower number to reduce the empty space, or remove it altogether. So, you can make it look like “padding: 1em 0 0;” or “padding: 0;”

• 

  carolinemaryweblog · Member · Dec 13, 2016 at 9:38 pm

  • Copy link

  Thank you very much – I will see if I can get in… Any ideas how to remove the line and blue circle altogether. I like it but I want to change it to an image which looks the same but where the blue circle reflects my Gravatar CM circle.

• 

  thesacredpath · Member · Dec 14, 2016 at 9:33 pm

  • Copy link

  Hi @carolinemaryweblog, add the following to your custom CSS to get rid of the icon/circle and line at the top.

  .is-singular .entry-header {
  	padding-bottom:.5rem
  }
  .is-singular .entry-inner::before, .error404 .entry-inner::before, .page-template-eventbrite-index .page-header::before, .single-event .entry-header::before {
  	content: "";
  }
  pre::before, .link-more a, .posts .hentry:hover .link-more a, .is-singular .entry-inner::after, .error404 .entry-inner::after, .page-template-eventbrite-index .page-header::after, .single-event .entry-header::after, .is-singular .post-navigation .nav-links::after {
  	background-color: transparent;
  }
  .is-singular .entry-content::before, .error404 .entry-content::before {
  	border: none;
  }

• 

  carolinemaryweblog · Member · Dec 18, 2016 at 3:22 pm

  • Copy link

  Hi – thanks very much for your help.

  This has enabled me to take out the previous icon and put in my own. I’m still wanting to reduce the white space above – any advice welcome. I also managed to lose all the content from my About page while adding the new icon which is annoying but I’m jumping on the road now so will try and rectify that later.

  Many thanks again
  Caroline

• 

  carolinemaryweblog · Member · Dec 18, 2016 at 10:08 pm

  • Copy link

  Hi everyone – I’m half way to solving my problem but I need to remove the white space above the line and icon that I have now put onto each page. I want to reduce this by about 2 or 3 lines worth. Can anyone advise?

  Many thanks

• 

  thesacredpath · Member · Dec 19, 2016 at 4:44 pm

  • Copy link

  Hi, add the following to reduce the whitespace above.

  .is-singular .entry-inner {
  	margin-top: 0;
  }
  .is-singular .entry-header {
  	padding-top: 0;
  }