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

    Hi the greatest support forum ever ( I am so glad to have bought my theme from you guys),

    I posting one more time and hope (for you ;-)) it will be the last time to get the perfect website.

    I have customize my homepage and especially the slideshow and it looks great on my laptop but I didn’t check on Iphone and Ipad. With all the adjusments I’ve made, the layout on mobile device is not exclatly well done. There is an unuseful space on the right that can be scrolled ( hope my english is understanable).

    Do you know by any chance how to get my homepage ajusted?

    http://fermedelahautemaison.fr

    Thank you very much for your help.

    Regards,

    Elodie.

    #108096

    Hi Elodie,

    With the site being in maintenance mode again, I’m not able to take a look at it live. However, you could use media queries to re-adjust the layout.

    If I remember right, you used a lot of left margin and left align css to get the layout the way you wanted so the layout isn’t adjusting dynamically its adjusting based on where the left position is and without regard to the visible space.

    You can get started with media queries by adding this block to your custom.css file:

    /* #Media Queries
    ================================================== */

    /* Smaller than standard 960 (devices and browsers) */
    @media only screen and (max-width: 959px) {}

    /* Tablet Portrait size to standard 960 (devices and browsers) */
    @media only screen and (min-width: 768px) and (max-width: 959px) {}

    /* All Mobile Sizes (devices and browser) */
    @media only screen and (max-width: 767px) {}

    /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
    @media only screen and (min-width: 480px) and (max-width: 767px) {}

    /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
    @media only screen and (max-width: 479px) {}

    And an article on using them: http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

    Regards,

    Devin

    #108097

    Hello Devin,

    Sorry for the maintenance mode.

    You can now have a look whenever you can because the code isn’t changing the layout.

    Thank you.

    Elodie.

    #108098

    The code won’t change the layout because it does not contain any styling rules. Devin just showed you the starting point and you’d need to add your styles to the media queries code. That said Velvet is not a responsive theme (see your last thread: http://www.kriesi.at/support/topic/mobile-device-1 ) and it’s not easily possible to make it mobile friendly. If you want a mobile friendly theme which adjusts the layout based on the screen size please use a responsive theme like Propulsion, Replete, Angular, Eunoia, Choices, etc.

    Especially the home page won’t support the screen size of mobile devices because the KenBurns slider does not support liquid layouts – thus even if you convert the entire theme to a responsive theme the sliders (KenBurns, etc.) will still break the css layout because of the fixed width,

    I’ll close this thread now.

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

The topic ‘Homepage custom css and more help needed for mobile device’ is closed to new replies.