Changing Main Image Height and Main Body Width – Publication Theme

• 

  rocketmandb · Member · Feb 10, 2016 at 4:04 pm

  • Copy link
  • Add topic to favorites

  Subject says it – I would like to change my blog theme to the Publication theme, but there are a couple things that bother me about it. First is that the main image is far too tall vs the width. The second is that the width of the main body is far too narrow.

  Both would seem to be CSS issues. I am a CSS noob. Can someone please point me to where I can change these values?

  Link to image showing dimensions I want to change:

  Dimensions image

  Thanks

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

• 

  thesacredpath · Member · Feb 10, 2016 at 7:50 pm

  • Copy link

  Hi there, we can set a max height for the top featured article image in Publication with the following CSS. For this I worked off of the demo site and it well may be that a change to the vertical position (second number in the background-position declaration) would have to be made. It depends on the nature of your image. I just arbitrarily chose 750px for the max height.

  .hero {
      max-height: 750px !important;
      background-position: 50% 50%;
  }

  As it stands, the content area is limited by the presence of the two sidebars. If you do not use any sidebar widgets, in either of the sidebars, the sidebar area will disappear. The #primary div, which contains the content, when no sidebars are present is 660px in width. One of the reasons for that is that for text based content, the general rule is that it should be kept between 500 and 750 pixels in width for easy reading. Wider than that and it becomes more difficult for people to read it easily. It’s actually more complex than that and there is a formula that takes into account text size.

  All that said, without sidebars, you could use the following to widen the content to 750px. You can of course adjust that max-width number as you desire, leaving the width set at 100%.

  .no-sidebar .content-area {
      max-width: 750px;
      width: 100%;
  }