customizing Hatch theme want images same sizes on portable devices?

lucypj · Member · Oct 30, 2013 at 6:11 pm
Copy link

Add topic to favorites
Hi – I have logo for the charity, and having created the blog which looked great on my mac, realise that it is incorrectly formatted for portable devices – it only shows half the logo on iPad or iPhone. Can you help please?

The blog I need help with is: (visible only to logged in users)
thistimethisspace · Member · Oct 30, 2013 at 6:39 pm
Copy link
What is the URL for the site in question please?
lucypj · Member · Oct 31, 2013 at 9:04 am
Copy link
roryfundraisers.net
Thanks for any help!
thesacredpath · Member · Nov 1, 2013 at 4:16 pm
Copy link
Hi @lucypj, If you visit the Hatch demo page on the theme showcase and narrow down your browser you will see that Hatch crops the images as the browser window gets narrower instead of resizing them. If you use the cat image at upper left as your reference, and then visit the demo site on your phone or tablet, you will see the effect of the cropping.

You can add the following to your custom CSS by going to Appearance > Customize > CSS, delete the informational text and paste in the following.
```
.blog .hentry, .archive .hentry {
    overflow: visible;
}
```
With this theme, the images are 220px in width when the site is wider, but as the number of rows of images reduce, the images bumps up to 440px in width (at 700px) and the the cropping starts to come into effect at tablet portrait widths of about 1024px.

Add the following, along with the previous and see what you think.
```
@media screen and ( max-width: 700px ) {
	.blog .hentry .attachment-home-thumb,
	.archive .hentry .attachment-home-thumb {
		max-width: 220px;
}
}
```

No items found.