Jump to content

Archived

This topic is now archived and is closed to further replies.

bobbytbobbyt

DMS 2 - Background

Recommended Posts

bobbytbobbyt

Website:

www.justbobbyt.com

 

Examples:

http://madburyclub.com/

http://www.apple.com/your-verse/orchestrating-sound/

 

Problem: Mobile (iPhone)

Hey I am trying to have my website behave in the same way as my two examples above. I am looking for help in the following specific areas

  • When setting my Canvas background to a image (1920x1080), how do I optimize the background so that it does zoom in when looking on it on a mobile phone?
  • How do I enable pinch zoom on my website, for mobile browing (please explain how to use a hook, I am not familar with CSS)?
  • Lastly, how do I turn off the parallax effect on RevSliders when inserted into a page ?

I am mainly looking for my website to behave like the apple.com site.

 

Thanks,

Share this post


Link to post
Share on other sites
Danny

Hi,

 

1. Not sure what you mean by zoom in, can you be more specific ?

2. To add pinch/zoom you will need to use a child theme and add the following code to the child themes functions.php file.

 

function pinch_zoom(){

  ?>
    <meta content=”width=device-width; initial-scale=1.0; maximum-scale=2.0; user-scalable=1;” name=”viewport”>
    <meta name=”viewport” content=”user-scalable=YES” />
  <?php
}
add_action(‘wp_head’, ‘pinch_zoom’);
 
You can download my basic child theme here - http://dannyholt.github.io/skeleton
 
3. As far as I know you can't. However, I would just add your image or video the Canvas section and not use a RevSlider section if all you want to do is mimic Apples website header.

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
bobbytbobbyt

Danny, if you look at my website on a mobile device (iphone) you will see my canvas background is distorted. The reason why I used revslider is because it seems to be the only way to get my images to scale down properly on a mobile device. 

 

On the Madbury website, I am almost 99% positive they are using revslider, but the parallax effect is taken off. (http://madburyclub.com/workshop/)

Share this post


Link to post
Share on other sites
Danny

The site you linked, isn't using DMS nor the RevSlider, it is using a free slider called FlexSlider, which the QuickSlider section is based on. Also, your site is hard to debug, as you have a lot of custom CSS and are also using negative margins to position elements. You shouldn't really use negative margins to position elements, as it can screw up your responsive layout, unless you know what you're doing.

 

In regards to your images being distorted, this is likely related to how you have positioned them, the Canvas section uses cover to resize your image the best it possibly can. If you do not like the way your images appear then you will likely want to use media queries.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
jagipson

@Danny @bobbytbobbyt

 

I used this code for the slider to turn off the Parallax:

 

#revslideru9i9js7 > div.pl-area-pad.fix > div > div{
transform: translate(0px, 0px) !important;
}
 
This forces the translate to stay at 0px and not to move. 

Share this post


Link to post
Share on other sites

  • Similar Content

    • opwolken
      By opwolken
      I'm wondering if it's possible to apply the featured image to a page's canvas area?
      I would like to have the featured image in a canvas on the matching page.
      Thanks!
    • tkpagelines
      By tkpagelines+
      Hi there,
       
      activating "translate content on scroll" and setting a standard title in canvas area doesn't work on iPad 4 in mobile browser. Doesn't matter if using safari or chrome the page crashes!
      Maybe you know that issue?
    • JasonLA
      By JasonLA+
      Hi guys, 
      Can you please tell me how to hide a section added to an individual product page using woocommerce? I'd like to add a canvas area above individual products (and have those areas be different for each product) but when I put the canvas up it appears the same across all products. 
       
      Right now you can hide areas on pages using their id, wondering if I can basically do the reverse and hide them on all pages except for the page with that id. 
       
      Thanks!
       
    • jfsturtz
      By jfsturtz
      Hi again.
       
      I'm aspiring to place an image on a page with a MediaBox, then define an HTML image map (<map>, <area> ...), then define an HTML <canvas> over it, then draw on the canvas with custom javascript.
       
      Before I spring $25 -- is Hooker the right guy for this job?  I know you can't support custom script; I'm fine with that -- I've got it all developed and working in JSFiddle.  I just want to know if Hooker is the right (or at least a workable) way to integrate it into my DMS2 site.
       
      Thanks.
       
      /John
    • Bleuy
      By Bleuy+
      Evening All
       
      Still finding my feet with DMS! I've been having a play today and what I am trying to achieve is a background image across my website (which repeats), no problem with this, however, I want my content areas to remain white or another chosen background colour.
       
      I've looked at the Site Settings (Colour & BG) but my image doesn't appear.  I've done it at template level and it goes across the whole page and doesn't leave the content areas white.
       
      I'm probably doing my usual (not looking at this logically), can anyone point me in the right direction.
       
      Thanks!
×