CSS for Widget and Page

• 

  tailgaterevival · Member · Dec 7, 2016 at 8:54 am

  • Copy link
  • Add topic to favorites

  I am trying to edit my Upcoming Events page on my site to show a header “Upcoming Events” and then just show the Upcoming Events widget beneath it.

  As of now, there is a Header, a grey line, and then the widget starts. I would like to remove the grey line, and bring the widget closer to the page header.

  Thanks.

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

• 

  tailgaterevival · Member · Dec 7, 2016 at 11:00 am

  • Copy link

  I changed my theme to Harmonic, and I managed to get close to what I was looking for, but the Upcoming Events page still has issues displaying properly and does not show up at all in mobile views.

  Here is the css I am using to try and force the widget to do what I want. Any advice is appreciated:

  .post-2 {
  display: none;
  }

  .widget-area {
  position: relative;
  left: -300%;
  }

  .widget-area {
  width: 600px;
  }

  .widget h1 {
  font-size: 48px;
  }

• 

  staff-loquaciousloon · Staff · Dec 7, 2016 at 8:57 pm

  • Copy link

  Hey @tailgaterevival

  Try the following code instead (some if it is the same):

  .page-id-2 #primary {
  	display: none
  }
  
  .page-id-2.secondary-sidebar #secondary {
    float: none;
  	display: block !important;
  }
  
  .widget-area {
  	max-width: 600px;
  }
  
  .widget h1 {
  	font-size: 48px;
  }

  Should do the trick on Harmonic :)

• 

  tailgaterevival · Member · Dec 7, 2016 at 10:55 pm

  • Copy link

  Thanks Chad1008,

  That definitely fixed my problems with Mobile views.

  However, now in standard desktop view, the entire widget is smushed to the left side of the screen and the event items are only in a small boxed area in desktop mode.

  Also, is it possible to change the widget’s fonts to match that of the rest of my site?

  Thanks again

• 

  staff-loquaciousloon · Staff · Dec 8, 2016 at 7:19 pm

  • Copy link

  I see what you mean. Here’s a revised version, which will handle width better, and also is a little cleaner:

  .page-id-2 #primary {
  	display: none;
  }
  
  .page-id-2.secondary-sidebar #secondary {
  	float: none;
  	display: block !important;
  	width: auto;
  }
  
  #upcoming_events_widget-12 h1 {
  	font-size: 48px;
  }

  This version also makes the title size more specific, so it won’t mess with any future widgets you might put on the site.

  Also, is it possible to change the widget’s fonts to match that of the rest of my site?

  It looks like widget is already using the same font, but the text is in bold and a bit smaller. Try this:

  #upcoming_events_widget-12 li {
  	font-weight: normal;
  	font-size: 16px;
  }