Grow your CSS skills. Land your dream job.

Need Help Please with WordPress Responsive Theme when viewed on iPad

  • # February 23, 2013 at 10:46 am

    Hi,

    Hoping someone can assist but I am having an issue with my home page on this website that I am currently building based on a premium theme. BTW, this theme is also responsive.

    To cut a long story short, I have two images side on the homepage but as you start shrinking the browser window to emulate viewing on an iPad, there is this huge white space on the right hand side.

    What I need help in please, is that for the home page only, when the size of the screen matches the iPad size, instead of seeing this white block of empty space, on the right hand side, is it possible to say centre the two vertical images, so that the white space is distributed equally on each side?

    The link to my site ( currently still under construction ), can be found here:

    http://tinyurl.com/b9z3bdq

    Hopefully someone can assist.

    Thanks.
    Tony.

    # February 23, 2013 at 12:57 pm

    In the appropriate media query (or breakboint) you could try…

    #main-photo img {
    margin: 0 auto;
    display: block;
    }

    You don’t want that all the time…but it works.

    # February 23, 2013 at 1:57 pm

    Another approach would be to display bigger images on the ipad. While the desktop has 2 images side by side, the tablet version will have bigger images one below the other.

    Change the image class width on the corresponding media breakpoint and you’re set.

    Hope this helps :)

    # February 28, 2013 at 9:42 pm

    All works fine now – thanks.

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".