Edin theme, image-margin size in iPad view

• 

  basilimobile · Member · Nov 30, 2014 at 2:51 am

  • Copy link
  • Add topic to favorites

  Hi, it was suggested I post my question about image display in the Edin theme on this forum. Can anyone help?

  I understand that Edin is a responsive theme. I hope my question is not confusing, but I am trying to find out if there is a way for me to use the css editor to make the site show wider/larger featured images (of linked child pages) or alternatively create narrower margins around these images on grid pages when they show on an iPad in portrait mode. It is only when the site adapts to this view that the side margins around featured images on the home page and other grid template pages become really wide (much wider than the margins for the text under them) and the images are therefore relatively small, which I think creates an inferior viewing experience. This doesn’t happen when the site is viewed on a smartphone because the image and text margins are aligned closer to the edge of the phone’s screen. So I wonder if it’s possible to amend or duplicate the code used to rearrange the images for a phone screen so that it displays in a similar way on an iPad screen.
  This is the only thing that annoys me about an otherwse brilliant theme and I’d love to find a solution.

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

• 

  thesacredpath · Member · Nov 30, 2014 at 4:11 am

  • Copy link

  Hi there, this almost seems to easy, but seems to take care of the issue.

  .grid-area .hentry img {
      width: 100%;
  }

  Give it a try and see what you think.

• 

  basilimobile · Member · Nov 30, 2014 at 9:20 am

  • Copy link

  Hi there. That’s brilliant. It seems to have fixed it. Full width on iPad in portrait orientation and full width on iPhone both orientations. Photos still show as a grid on PC and iPad landscape view.

  Thank you so much for your help.

• 

  thesacredpath · Member · Dec 1, 2014 at 1:09 am

  • Copy link

  You are welcome.

• 

  basilimobile · Member · Dec 5, 2014 at 10:34 am

  • Copy link

  Hello again. Sorry to be a pain, but I’ve changed my static home page to the ‘front page’ template – so that I could run some text over the main featured image – and the css above no longer works on that page. The images are back to their smaller size when viewed on an iPad, though they’re still at 100% on the other grid pages. I’m guessing I need to add similar code with a different selector, but am not sure. Any ideas?

• 

  thesacredpath · Member · Dec 5, 2014 at 8:30 pm

  • Copy link

  We need to change the CSS selector used. Change what I had give above to this:

  .home .post-thumbnail img{
  	width:100%
  }

• 

  basilimobile · Member · Dec 6, 2014 at 1:58 am

  • Copy link

  Hi again. Yep, I added the code and it did the trick. Front page now also showing full width images. Once again, thank you very much.

• 

  thesacredpath · Member · Dec 6, 2014 at 2:01 am

  • Copy link

  Once again, :) you are welcome.