How to enlarge feature image and move site title & tagline to appear above it

• 

  ingridbolanos · Member · Sep 7, 2015 at 6:00 pm

  • Copy link
  • Add topic to favorites

  Can any of you tell me how to enlarge my feature image and move the site title and tagline above it? also would like to know how to move the primary menu bar (Home, About Me, Contact Me) to appear along the upper part of my image. If anyone can help me I’d so appreciate it.

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

• 

  thesacredpath · Member · Sep 7, 2015 at 8:41 pm

  • Copy link

  Hi there, on responsive width themes such as Sela, moving page elements around, and having things work right on all screen/window sizes from large desktops all the way down to phones is challenging at best. As an example, here would be the code necessary to enlarge your header image and move the title and description above the image.

  .site-title, .site-description {
      position: relative;
      top: -250px;
  }
  .site-branding {
  	padding-top: 150px
  }
  @media screen and (max-width: 1185px) {
  	.site-header {
  		padding-top: 150px;
  	}
  	.site-title, .site-description {
  		top: -280px;
  	}
  }
  @media screen and (max-width: 600px) {
  	.site-header {
  		padding-top: 150px;
  	}
  	.site-title, .site-description {
  		top: -290px;
  	}
  }
  @media screen and (max-width: 465px) {
  	.site-header {
  		padding-top: 170px;
  	}
  	.site-title, .site-description {
  		top: -310px;
  	}
  }
  @media screen and (max-width: 455px) {
  	.site-header {
  		padding-top: 220px;
  	}
  	.site-title, .site-description {
  		top: -360px;
  	}
  }

  Since the menu is entwined in all this, if we attempt to move the menu above the image along with the title and description it is going to get even more challenging and we may end up with twice as much code and not get a consistent and aesthetically pleasing result even then.

  Go to Appearance > Customize > CSS, delete all the informational text in that window, and paste in the above custom CSS and test your site on your computer, and on tablets and phones and see what you think. I increased the height of your header by about 50%. If you want more of the image showing, we will have to go back in and adjust all the values in the above code for that increase in height. Let me know what you think.

• 

  ingridbolanos · Member · Sep 8, 2015 at 1:46 am

  • Copy link

  Thank you Happy Engineer. I’m trying it now. The code helped with enlarging the image but makes my time and tagline disappear. Still playing with it.

• 

  thesacredpath · Member · Sep 8, 2015 at 8:58 pm

  • Copy link

  Whoops, I seemed to have missed copying one rule. Instead of the above, add the following.

  .site-title, .site-description {
      position: relative;
      top: -250px;
  }
  .site-branding {
  	padding-top: 150px;
  }
  .site-header {
    padding-top: 120px
  }
  
  @media screen and (max-width: 1185px) {
  	.site-header {
  		padding-top: 150px;
  	}
  	.site-title, .site-description {
  		top: -280px;
  	}
  }
  @media screen and (max-width: 600px) {
  	.site-header {
  		padding-top: 150px;
  	}
  	.site-title, .site-description {
  		top: -290px;
  	}
  }
  @media screen and (max-width: 465px) {
  	.site-header {
  		padding-top: 170px;
  	}
  	.site-title, .site-description {
  		top: -310px;
  	}
  }
  @media screen and (max-width: 455px) {
  	.site-header {
  		padding-top: 220px;
  	}
  	.site-title, .site-description {
  		top: -360px;
  	}
  }

  See what you think and let me know. Sorry about missing that other CSS rule. :(

• 

  ingridbolanos · Member · Sep 26, 2015 at 9:16 am

  • Copy link

  sorry for not getting back to you. Finally got around to trying the code and it worked. Thanks a bunch for helping me out. Much appreciated!

• 

  thesacredpath · Member · Sep 26, 2015 at 7:18 pm

  • Copy link

  Hooray and you are welcome. Let us know if you have additional questions.

• 

  ingridbolanos · Member · Sep 26, 2015 at 11:36 pm

  • Copy link

  Hi again,

  Would you be able to help me get my header image to look just a little bigger? If you go to my blog you will see the image. i would like to get just a little more of the top portion of the image in so you can see a little more of my reading glasses as well as a little more of the bottom so that I can get more of the scrapbook paper in that is just under my pen. Hope this makes sense. If you go to my blog you will see what I’m taking about.

  http://alovelysimplelife.com

• 

  thesacredpath · Member · Sep 27, 2015 at 12:06 am

  • Copy link

  You can add the following and adjust the minimum height to get more of the image to show.

  .site-branding {
      min-height: 72px;
  }

• 

  ingridbolanos · Member · Sep 27, 2015 at 12:18 am

  • Copy link

  It worked. Can’t thank you enough!

• 

  thesacredpath · Member · Sep 27, 2015 at 1:26 am

  • Copy link

  You are welcome.