Changing Font & Text Positioning on Grid Page

• 

  muslimahcoaching · Member · Dec 21, 2016 at 6:38 pm

  • Copy link
  • Add topic to favorites

  Hi,

  What is the CSS code to change the font size for each title on a grid page?
  Is it possible to move the title on top of the picture? Is it possible to add a subtitle below the picture?

  https://tayyibaatwives.com/about/

  Thank you.

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

• 

  eallas · Member · Dec 21, 2016 at 7:35 pm

  • Copy link

  Hey there tayyibaatwives!

  What is the CSS code to change the font size for each title on a grid page?

  For changing the font size of each title on a grid page, you’ll need to use the following code:

  .wf-active h1 {
      font-size: 125%;
  }

  You can either change it by percentage or give a specific number like “25pt” or whichever number you prefer.

  Is it possible to move the title on top of the picture?

  I’ll respond soon for the correct CSS for this problem.

  Is it possible to add a subtitle below the picture?

  You can add a tagline to your site by first going to customize (https://wordpress.com/customize/) and then clicking on Site Identity and adding a Tagline to your website.

• 

  muslimahcoaching · Member · Dec 22, 2016 at 12:00 pm

  • Copy link

  Hi, Thanks for your response. Really looking forward for the CSS code of how to put the title on top of the picture. In regard to the subtitle, I was referring to the grid page, not a tagline for the website. I would like to move the main title on top of the grid picture, then have a subtitle below it. Is it possible to delete the little text blurb below each picture?

  https://tayyibaatwives.com/about/

  Thank you.

• 

  eallas · Member · Dec 22, 2016 at 2:35 pm

  • Copy link

  Hey there tayyibaatwives!

  Sorry for the delay. Yesterday got busy.

  Really looking forward for the CSS code of how to put the title on top of the picture.

  This css I found from @thesacredpath in this thread will help the title and logo switch. I altered it for your situation. NOTE: You’ll need to remove the logo from the site identity section for this to work.

  @media screen {
  .site-title {
      background-image: url("https://tayyibaatwives.files.wordpress.com/2016/10/logoverse.png");
      background-position: center bottom;
      background-repeat: no-repeat;
      background-size: auto;
      margin-left: auto;
      margin-right: auto;
  		padding-bottom: 100px;
  		line-height: 0px;
  }
  .site-logo {
      display: none;
  }
  }

  In regard to the subtitle, I was referring to the grid page, not a tagline for the website. I would like to move the main title on top of the grid picture, then have a subtitle below it.

  I’ll work on this problem. Can’t solve it right now. I’ll let you know how it goes.

  Is it possible to delete the little text blurb below each picture?

  The following code will remove the blurb.

  @media screen and (min-width: 600px)
  .child-pages .entry-summary {
      display: none;
  }

  Let me know if these help. Thanks for your patience!