Qua theme – homepage

• 

  helenhemingway · Member · Nov 27, 2015 at 8:10 pm

  • Copy link
  • Add topic to favorites

  The website’s homepage has a Site title: Hemingway Costume
  and Tagline: design & styling

  I’ve noticed, on large-screen devices that the two often impact and squish together so asked WP helpdesk for advice. Herman below suggested adding the CSS below, but it didn’t look right. However I am interested in his last suggestion:

  If it were me, I’d add that padding, and also a float-left property to align the tagline with your title, then add float-right to the contact info you added using the after selector. I realise this might not be your preference, but it’s one way you could possibly fix this.

  Is the above possible in CSS, just to make the top margin tighter?

  Thanks in advance

  Hello, Shanti

  It looks like you haven’t posted in the CSS forum yet, so maybe this CSS will help:

  .wf-active h2.site-description {
  padding-top: 30px;
  }

  This will shift your tagline to below the title, preventing the overlap. It’s the only way I can figure out to do this, so if that doesn’t work for you, please post in the forum where someone more experienced might be able to offer an alternative.

  If it were me, I’d add that padding, and also a float-left property to align the tagline with your title, then add float-right to the contact info you added using the after selector. I realise this might not be your preference, but it’s one way you could possibly fix this.

  Herman – Happiness Engineer
  WordPress.com | http://support.wordpress.com

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

• 

  thesacredpath · Member · Nov 30, 2015 at 11:12 pm

  • Copy link

  Hi there, I’ve taken the liberty of combining and changing some of your CSS to neaten things up a bit and added some additional CSS. Copy out your existing CSS and save it in a plain text file for reference and safe keeping and then replace it with the following and see what you think.

  @media screen and (min-width: 768px) {
  	.site-header {
  		padding-bottom:0;
  		padding-top: 0;
  	}
  	.main-navigation ul a {
  		padding-top:-25px;
  	}
  	.main-navigation ul {
  		padding-bottom:15px;
  	}
  	.jp-carousel-image-meta {
  		display:none;
  	}
  	.home figure {
  		position:relative;
  	}
  	.home figure:hover .wp-caption-text {
  		opacity:1;
  		padding:20px;
  	}
  	.home .wp-caption-text {
  		background:rgba(255,255,255,0.8);
  		bottom:-25px;
  		color:#333;
  		opacity:0;
  		position:absolute;
  		width:100%;
  		-webkit-transition:all .2s ease-in-out;
  		-moz-transition:all .2s ease-in-out;
  		-o-transition:all .2s ease-in-out;
  		font-size:16px;
  		font-style:normal;
  	}
  	.wf-active h1 {
  		font-size:35px;
  	}
  	.wf-active .site-title,.wf-active .text--title {
  		font-size:49px;
  	}
  	#page {
  		padding-top:3px;
  	}
  	.page .entry-title {
  		margin-top:-.2em;
  		margin-bottom:0;
  	}
  	.wf-active .page .entry-title {
  		font-size:30px;
  	}
  	.site-description {
  		margin-top: 0;
  		padding-top: 0;
  		width: 100%;
  		margin-bottom: 0;
  		line-height: 1;
  	}
  	.site-title {
  		line-height: 1;
  		width: 100%;
  	}
  	.site-branding {
  		width: 100%;
  	}
  }
  @media screen and (min-width: 960px) {
  	.confit-hours {
  		margin-top:-28px;
  		margin-left:136px;
  	}
  	#widget_contact_info-6 {
  		border:none;
  		margin-top:20px;
  		margin-left:-590px;
  		margin-top:-20x;
  	}
  	.site-description {
  		width: 100%;
  	}
  }
  .footer-widgets .widget {
  	border:none;
  }
  .site-description {
  	width: 100%;
  }
  .site-description::after {
  	content:"(email visible only to moderators and staff) / +44 207 437 2055";
  	font-family:"museo-sans-1", "museo-sans-2", sans-serif;
  	font-size:12px;
  	display:block;
  	font-weight:700;
  	float: right;
  	color:#666;
  }
  @media screen and (max-width: 767px) {
  	.site-description {
  		margin-top: 0;
  		margin-bottom: 0;
  	}
  	.site-title, .site-description {
  		line-height: 1;
  	}
  	.site-header {
  		padding-bottom: 30px;
  		padding-top: 0;
  	}
  }
  @media screen and (max-width: 480px) {
  	.site-description::after {
  		text-align: center;
  		float: none;
  		padding-top: 10px;
  	}
  	.site-description {
  		text-align: center;
  		float: none;
  	}
  }

• 

  helenhemingway · Member · Nov 30, 2015 at 11:36 pm

  • Copy link

  hello again SP!

  Thanks v.much for this – all looks fine as you’ve suggested except the site title – the space above has now decreased which is fine to leave as is but could we make the space between the menu and top of 1st set of images equal to the top margin? Hope this makes sense..

  Shanthi

• 

  helenhemingway · Member · Nov 30, 2015 at 11:37 pm

  • Copy link

  hello again SP!

  Thanks v.much for this – all looks fine as you’ve suggested except the site title – the space above has now decreased which is fine to leave as is but could we make the space between the menu and top of 1st set of images equal to the top margin? Hope this makes sense..

  Shanthi

• 

  thesacredpath · Member · Dec 1, 2015 at 1:28 am

  • Copy link

  There is 15px of bottom padding on the menu ul element. Add this to your CSS and adjust as desired.

  .main-navigation ul {
      padding-bottom: 15px;
  }

  If you wish to space the site title down some, add the following and then adjust my 10px example value as desired.

  .site-title {
      padding-top: 10px;
  }