Removing extra space responsively

• 

  radiantlyurs · Member · Sep 6, 2017 at 11:35 am

  • Copy link
  • Add topic to favorites

  Hi,

  I have a black space showing up under the featured image in the slider post I have for my blog: https://dysfunktionalmusings.com

  I have managed to hardcode this height for Desktop using the following code:

  • #post-641{ height: 372px; }
  • #post-326{ height: 472px; }
  • #post-533{ height: 372px; }
  • #post-514{ height: 472px; }

  However, I am unable to make the blog behave the same way across tablets and phones. I’m not very CSS savvy — any help would be greatly appreciated!

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

• 

  thesacredpath · Member · Sep 6, 2017 at 8:56 pm

  • Copy link

  Hi there, whenever you use a static dimension, such as height: 372px; it cannot be responsive as it is a set height.

  Looking at the Twenty Fourteen theme showcase page (scroll down to Quick Specs near the bottom), it recommends that featured images be at least 1038px in width, and measuring out the available space for the images, I would suggest 1038 x 380 pixels for your images. I would suggest creating an image of that size for one of the posts in your slider and the replace the featured image on that post and see how that looks to you and let me know.

• 

  radiantlyurs · Member · Sep 7, 2017 at 2:53 am

  • Copy link

  I actually don’t want such a large featured image (in terms of height)

  I’m looking to reduce the height of the block and essentially bring the Back to School post (which is lower in the page) higher up.

  Is there a way to decrease the height of the block without setting it as a hard fix?

• 

  thesacredpath · Member · Sep 7, 2017 at 3:57 am

  • Copy link

  The problem is, the software adds the dimensions (height and width) for the featured content slider stuff directly to the HTML, so it is very difficult to override with CSS. I can add the code and override it, but you really need to have all of your images meet the 1038px width, and then, whatever height you wish to use, have all of them meet that also.

  Even with the above though, what we are going to be able to do with CSS alone is going to be limited and the outcome is not going to be perfect.

  You may want to look through the themes again and come up with another theme. Still, the image size consistency is still going to be important.

• 

  thesacredpath · Member · Sep 7, 2017 at 3:58 am

  • Copy link

  The reason I say it is going to not be perfect is that we have to size the container for the featured content, not the posts within it, and that means we have one height to work with. We really can’t do it separately for each post in the slider.