Grid and Front Page Widgets – Size

• 

  pagestaltcenter · Member · Aug 1, 2016 at 9:23 pm

  • Copy link
  • Add topic to favorites

  Is there anyway to make the grid pics and front page widgets the same size? they look ok in PC, but when you look at the page on a tablet or phone the front page widgets are huge compared to the grid pics. Thanks!

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

• 

  hallluke · Member · Aug 2, 2016 at 7:23 am

  • Copy link

  Unfortunately the front page images for your featured pages are limited to 330px wide by the theme, this can’t be overwritten with CSS. The only thing I can suggest is limiting the footer widgets to the same size and centring them so they appear in the same way on tablets:

  .front-page-widget .widget_image img {
  	max-width: 330px;
  	margin: 0 auto;
  	display: block;
  }

• 

  thesacredpath · Member · Aug 2, 2016 at 7:31 am

  • Copy link

  Hi there, you can add the following to your custom CSS and see what you think. You will notice that the images lose quality. This is because the theme software is creating the images at the original size, and with this CSS, we are asking the browser to make the image larger, and they aren’t too good at that.

  @media screen and (max-width: 1019px) {
  	.featured-page .post-thumbnail img {
  		width: 100%;
  	}
  }

• 

  thesacredpath · Member · Aug 2, 2016 at 7:33 am

  • Copy link

  @hallluke has a good solution as well. Give them both a try and see what you think and then let us know.

• 

  pagestaltcenter · Member · Aug 2, 2016 at 7:44 pm

  • Copy link

  Great, thank you both!

• 

  thesacredpath · Member · Aug 3, 2016 at 2:31 am

  • Copy link

  You are welcome.