Search Result Page Height

• 

  cameronsemple5 · Member · Dec 3, 2014 at 2:43 am

  • Copy link
  • Add topic to favorites

  I am having trouble getting a strip of colour to show full height on the search results page. All search results after the first seem to be outside the height limits of all containers.

  I would like the page to look similar to this:
  http://highandwide.com.au/test-page/

  Right now it looks like this:
  http://highandwide.com.au/?s=artists+cascades

  This is the relevant CSS that I have now:

  .search-results #content-wrapper,.page-template-default #content-wrapper,.single #content-wrapper {
  	background-color: rgba(255,255,255,0.6);
  	margin: 0 380px;
  }

  There also seems to be a bug where the edit button on the second post is half hidden here.

  Using Harmonic theme

  Thanks

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

• 

  thesacredpath · Member · Dec 3, 2014 at 6:38 pm

  • Copy link

  Hi there, this will mimic the general look of the test page you reference, but I would suggest that you grab your browser window and narrow it way down and you will see that on smaller screens (tablets and phones) your site totally blows up and would not be useable on phones and tablets.

  .search-results section {
      height: auto;
      min-width: 75%;
  }

  The problem is caused by using 380px left and right margins here:

  .search-results #content-wrapper, .page-template-default #content-wrapper, .single #content-wrapper {
      background-color: rgba(255, 255, 255, 0.6);
      margin: 0 380px;
  }

  If you replace the above with the following, and the narrow and widen your site, you will see that the content remains readable clear down to phone sizes.

  .search-results #content-wrapper, .page-template-default #content-wrapper, .single #content-wrapper {
      background-color: rgba(255, 255, 255, 0.6);
      margin-left: auto;
      margin-right: auto;
      max-width: 700px;
  }

  Try the above and let me know what you think.

• 

  thesacredpath · Member · Dec 3, 2014 at 6:40 pm

  • Copy link

  Another alternative to my above suggestion on the max-width issue would be to make the max width into a percentage, such as below.

  .search-results #content-wrapper, .page-template-default #content-wrapper, .single #content-wrapper {
      background-color: rgba(255, 255, 255, 0.6);
      margin-left: auto;
      margin-right: auto;
      max-width: 75%;
  }

• 

  cameronsemple5 · Member · Dec 4, 2014 at 12:02 am

  • Copy link

  Thanks very much. I tweaked a bit with the percentages, but overall this has given the effect that I’m after.

• 

  thesacredpath · Member · Dec 4, 2014 at 12:25 am

  • Copy link

  Hooray, and you are welcome.