Mobile Responsive Homepage

Home Forums WordPress Themes – Premium Celestial (Celestial Reloaded) Mobile Responsive Homepage

This topic contains 3 replies, has 11 voices, and was last updated by  Dean Jeffs 5 years, 11 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #14162

    Dean Jeffs
    Member

    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

    #18334

    Sushil Adhikari
    Moderator

    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.

    #18335

    Dean Jeffs
    Member

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

    #14163

    Sushil Adhikari
    Moderator

    you’re very welcome…cheers!

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.