Featured section Gazette theme

• 

  angeloharuni · Member · Mar 13, 2016 at 5:55 pm

  • Copy link
  • Add topic to favorites

  Hi, I was wondering if it is possible through css to make the featured content section on the Gazette theme, fit only the main content size. So it would look uniform with the rest of the site. From inspecting the page I know that the featured pictures are set to be 33.3333% of the size of the page. Can we make it 33.3333% of a box the width of the main content?

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

• 

  madeincosmos · Member · Mar 13, 2016 at 6:32 pm

  • Copy link

  Hi,

  The solution below is a little bit complex, because the main content size depends on the size of users screen. With code like this we will have all possible scenarios covered:

  .has-header-image .featured-content {
      width: 90%;
      margin: 30px auto 0 auto;
  }
  
  @media screen and (min-width: 600px) {
      .has-header-image .featured-content {
          margin-top: 60px;
      }
  }
  
  @media screen and (min-width: 768px) {
      .has-header-image .featured-content {
          width: 648px;
      }
  }
  
  @media screen and (min-width: 840px) {
      .has-header-image .featured-content {
          width: 720px;
      }
  }
  
  @media screen and (min-width: 960px) {
      .has-header-image .featured-content {
          width: 840px;
  		margin-top: 0;
      }
  }
  
  @media screen and (min-width: 1080px) {
      .has-header-image .featured-content {
          width: 960px;
      }
  }
  
  @media screen and (min-width: 1380px) {
      .has-header-image .featured-content {
          width: 1260px;
      }
  }

  I hope you find this helpful.

• 

  angeloharuni · Member · Mar 14, 2016 at 12:30 pm

  • Copy link

  thank you soooo much madeincosmos, you’ve been so much help :)