Canvas Support

Final touches on the wedding site

1 reply · opened May 14, 2016

CchrisdokoMay 14, 2016

Hellow, I copied this over from the comment section because it look like the forum is a more responsive place.

First, This is a great set of templates. I’m teaching myself all of this, so I started with a simple site. The documentation and these posts have helped me navigate the code as I learn.

I’m now at a point where I can use your help to guide me in the right direction. My page is www.mickyandchris.com

  1. How can I change the position of the main caption text to be lower on the page and possibly to the left? Will this still work on a mobile (I test on iPhone 6 and other sizes in browser). I saw the suggested fix to change from the default js, but will this work on responsive still? If so, you can tell me to just do that as I can find those instructions.

  2. For mobile size screens, how can I set the main background images to zoom out a bit and possibly re-position what part of the image shows up on mobile? The small width tends to focus on section that doesn’t make sense and I’m stuck playing with crops and to get it in the right place (as it is now, the images are in the right place on desktop, but the mobile view is mostly zoomed in incorrectly.

  3. About the countdown on mobile, can it be set to smaller and narrow width for mobile so that it remains in one row rather than stacking vertically. It’s fine otherwise on dig desktop as it is.

Thank you very much!

SSemicolon WebSTAFFMay 16, 2016

Hello,

We Really Apologize about the Delay in replying to your Comment!

Thank You so much for the Kind Words. :)

  1. Can you please let us know if you are planning to change the Position of both the Caption Texts and the Countdown so that we can provide you with the exact code for this. Thanks for your Patience.

  2. This is Definitely Possible. The Zooming and the Position of the Mobile Images depends on the Outer Viewport since the Background Images are set to background-size:cover; and they size automatically. Please consider adding the following CSS code in your Document <head> and this should work fine:

#slider .flexslider { height: 100% !important; }

Do let us know if you are still facing issues with this.

  1. This is Definitely Possible. Please consider adding the following CSS Code:
.device-xxs .countdown-large .countdown-section {
    display: inline-block;
    width: 25%;
    margin: 0;
    border: 0;
    font-size: 15px;
}

.device-xxs .countdown-large .countdown-amount { font-size: 32px; }

This will definitely work fine. Thanks for your Patience.

Do let us know if we can help you with anything else or if you find any further issues with Canvas.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard