Goran Front Page Text Box

• 

  taapsir · Member · Jul 30, 2015 at 8:34 pm

  • Copy link
  • Add topic to favorites

  Hi,
  I want to reduce the width of my front page text box so that the text does not run through the length of the image.
  Second, I want to bring the text box lower so that the text falls on the darker part of the image.
  Lastly, my widgets section at the bottom of the front page is really large. is there a way to reduce its length (top to bottom length)?
  Thanks!
  my website is taapsiramchandani.com

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

• 

  darrellschulte · Member · Jul 31, 2015 at 5:00 am

  • Copy link

  Hey there!

  Give this whirl.

  .hero .hentry .entry-content {
      padding-top: 60px;
  }
  
  .hero .entry-content {
      width: 650px;
      height: 200px;
  }
  
  .footer-widget-area {
      padding-top: 16px;
  }

• 

  taapsir · Member · Jul 31, 2015 at 1:33 pm

  • Copy link

  It worked!!
  Thank you.
  One last question! Any way to change the color of the text only on the front page? :)

• 

  lireodesigns · Member · Jul 31, 2015 at 2:07 pm

  • Copy link

  Timely! I was working in Goran yesterday, trying to do something similar and found styles for three different widths.

  For the width in the .hero .entry-content style, won’t you need to create media queries? I found the original styles were written with widths of 672px, 876px, and 1086px.

• 

  taapsir · Member · Jul 31, 2015 at 3:39 pm

  • Copy link

  Also, I tried changing to widget’s bottom padding to 0 px but I still have a big gap between the last line “Follow Me” and the dark bar at the bottom with the WordPress info. Any way to reduce that so that the widget box is a little tighter?
  Thanks.

• 

  taapsir · Member · Jul 31, 2015 at 3:42 pm

  • Copy link

  figured out how to change the font color on the front page.
  just the widget query please! thanks.

• 

  lireodesigns · Member · Jul 31, 2015 at 4:08 pm

  • Copy link

  You could give this a try, not sure how it displays on mobile. I only tested on desktop:

  .footer-widget-area {
      margin-bottom: -35px;
  }

• 

  darrellschulte · Member · Jul 31, 2015 at 4:22 pm

  • Copy link

  @lireodesigns — You’re probably right. I guess I tend to forget about smaller devices. What do you think about this suggested change?

  @media only screen and (min-width: 1200px) {
  .hero .hentry .entry-content {
      padding-top: 60px;
  }
  
  .hero .entry-content {
      width: 650px;
      height: 200px;
  }
  }

  As for the widget padding, this might be another approach:

  .widget {
      padding-bottom: 0px;
  }

  You could try this or @lireodesigns’s suggestion and then check on mobile devices to determine if either have an issue you will need to avoid.

• 

  taapsir · Member · Jul 31, 2015 at 5:18 pm

  • Copy link

  thanks!
  i left the top padding at 16px and the bottom at 0px. works fine on desktop and mobile. however, the text box in the mobile device now goes into white space on the mobile device!
  help please?

• 

  lireodesigns · Member · Jul 31, 2015 at 7:29 pm

  • Copy link

  To make sure the content displays correctly on smaller devices, try this code:

  @media screen and (min-width: 768px) {
  	.hero .entry-content {
  		width: 405px;
  	}
  }
  
  @media screen and (min-width: 1020px) {
  	.hero .entry-content {
  		width: 525px;
  	}
  }
  
  @media screen and (min-width: 1230px) {
  	.hero .entry-content {
  		width: 650px;
  	}
  }

• 

  taapsir · Member · Jul 31, 2015 at 8:07 pm

  • Copy link

  hi @lireodesigns,
  the code worked for the tablet size. thanks for that.
  the text is still out of the box on the mobile device. which of the codes will I have to change in the one above to rectify this?
  (i have no coding experience, so please bear with me!)

  thanks.

• 

  lireodesigns · Member · Jul 31, 2015 at 8:20 pm

  • Copy link

  I’m troubleshooting the same issue on a site I’m building. I believe the issue is due to adding padding to the top, which doesn’t give our text as much space to grow.

  But I’m still investigating. Hoping to find a solution soon!

• 

  taapsir · Member · Jul 31, 2015 at 8:25 pm

  • Copy link

  Thank you for the update!
  Would appreciate it A LOT if you could help me with this once you figure it out :)

• 

  thesacredpath · Member · Jul 31, 2015 at 10:33 pm

  • Copy link

  Hi, give the following a try.

  @media screen and (max-width: 767px) {
  	.hero .entry-content {
  		width: 90%;
  		padding-top: 5% !important;
  	}
  	.hero .entry-content p {
  		margin-bottom: 12px;
  	}
  }

  One thing that can cause issues with spacing on responsive designs is using static values such as pixels. Of course variable values such as percent or em units can have issues too. See what you think with the above.

• 

  lireodesigns · Member · Jul 31, 2015 at 11:12 pm

  • Copy link

  Hi Richard,

  Thanks for looking into this. Originally, I wrote the media queries with ems, but when I reviewed the stylesheet, I saw the developer used pixels. So I changed back to pixels, not my favorite for responsive design. But I thought I’d stay consistent with his CSS unit choices.

  I finally got my site to to work on a smart phone, using a modification of your styles. Here’s what worked for my site:

  @media screen and (max-width: 767px) {
  	.hero .entry-content {
  		margin-bottom: 2em;
  	}
  }

  which allowed some of the background photo to display below the text box.

  I reset margin-bottom: 0 on .hero .entry-content in the @media query and ( min-width: 768px) style.

• 

  thesacredpath · Member · Aug 1, 2015 at 7:30 am

  • Copy link

  Super, and you are welcome. Let us know if you have further questions.

• 

  taapsir · Member · Aug 1, 2015 at 4:15 pm

  • Copy link

  Hi thesacred path,
  My menu headers – Teaching, Visual Anthropology, and Curriculum Vitae used to all be on one line and for some reason, the CV heading is on the second line. Tried changing the font to no avail.
  Also, is there any way to change the header from capital letters to cursive writing?
  Thanks again!

• 

  thesacredpath · Member · Aug 2, 2015 at 6:49 am

  • Copy link

  Hi, the site title in the header area and the menu are in the same parent div with each having a set width. When the browser window is narrowed, the menu will switch to two lines if the overall menu is too long to fit in the available space. I looked at shortening the site title div, but it is about as short as we can get it without risking it going to two lines.

  You could tighten up the spacing on the menu items a bit with the following. Adjust the 32px right margin value.

  .main-navigation li {
      margin-right: 32px;
  }

  On the cursive, are you wanting to go away from all caps? If so, you can add the following.

  .main-navigation {
      text-transform: none;
  }

• 

  taapsir · Member · Aug 2, 2015 at 3:24 pm

  • Copy link

  you solved it!
  Thank you. My headers are now cursive.

• 

  taapsir · Member · Aug 2, 2015 at 3:27 pm

  • Copy link

  another query!
  how can I increase the font size for the menu headers and the widgets without it affecting the font size of the page texts?
  Thanks again.