Homepage custom css and more help needed for mobile device « Support Forum | Kriesi.at

Support Forum » Velvet

Homepage custom css and more help needed for mobile device

4 posts from 3 voices

Started 2 months ago by elodie14
Latest reply from Dude
This topic is closed
This topic is not a support question

Tags:

No tags yet.

elodie14
Member

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.

Posted 2 months ago #

Devin
Moderator

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

Posted 2 months ago #

elodie14
Member

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.

Posted 2 months ago #
Dude
Dude

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.

Posted 2 months ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.

Kriesi.at - Wordpress Themes and HTML Templates

Homepage custom css and more help needed for mobile device

Topic Closed

Support Forum usage - Please read

Check out some of our WordPress Themes

Blog Categories

Latest Themes

Pages

About me…