Mobile Responsive Homepage

[Dean Jeffs]

Hello,
I’m really loving this theme!
I have two things however I can’t seem to fix.

I’ve used the sample snippit for front page widgets 1, 2, 3 & 4. However, when you get down to the mobile size, the images are left aligned and leave a bunch of space on the right. Is there a bit of code I can put in so that when I get to this break point, the image is centred?

Also, I’ve used the widgetkit slider with the sample-slide-caption code. Everything looks great here when you view on an iPhone the caption does not show, which is good as there isn’t enough room for the text. However, when you view on Android, you can still see the caption and it doesn’t look great. Is there any way I can fix this?

Thanks in advance!
Dean

[Sushil Adhikari]

Thanks and glad you are enjoying it 🙂
As for the centering of the image, looks like a little fix I need to add to the next update. However, the styling for this is around line 827 of the style.css and looks like this:

.type-page .attachment-post-thumbnail,
.imageframe,
.entry-attachment img {
	max-width: 98%;
	padding: 0.563em;
	background-color:#f6f6f6;
	border:1px solid #d2d2d2;
}

Basically what you need to do is create a new style (which will be part of my update) after the above code like this:

.image-frame {
    text-align: center;
}

As for the Android view, it means I need to change the @media max width styles in the celestial slider template that you uploaded, there’s a stylesheet there and it should show this:

@media (max-width: 320px){
	.wk-slideshow-celestial .caption,
	.wk-slideshow-celestial h1,
	.wk-slideshow-celestial h2,
	.wk-slideshow-celestial .next,
	.wk-slideshow-celestial .prev,
	.wk-slideshow-celestial .caption
	p {display:none}

A temporary fix would be to change the max-width to 480px (or 479px). Hard for me to really test this on my end because I only have an iphone 5.

[Dean Jeffs]

Excellent. Problem solved!
Brilliant customer service mate. Can’t believe how quickly you came back with the fix. Thanks 🙂

[Sushil Adhikari]

you’re very welcome…cheers!

[Author]

Posts