[Pro] Responsive Gallery/Carousel?

One final question… I’ve got the WOW slider version working fine now, but can’t for the life of me work out how to make it 100% width. I’ve tried changing a few settings in the inspector but to no avail. I’ve followed the tutorial for 100% width items / images which works fine but can’t get the WOW slider to play ball at 100%

Many thanks.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

On 22 Oct 2013, 9:28 pm, tonzodehoo wrote:

On 22 Oct 2013, 8:27 pm, Thomas Kimmich wrote:

As an example, I can only offer the following (especially the three excerpt columns) to “illustrate” what I meant:

http://kimmich-dm.de/templates/stoneoven/index.html

Cheers

Thomas

I like your example very much thomas. How is this constructed? Is it doable in FW5.6.5?

As all my stuff “Inline” and I tend to say - yes, it should be doable in FW5 as well.

It uses (just if it’s of interest) the native Supersized http://buildinternet.com/project/supersized/

Parts of how this is done you can see at

http://kimmich-dm.de/wordpress/?p=880

Cheers

Thomas


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Neil,

There was one thing I forgot to mention: The CSS hack that I outlined above will cause really quirky behavior if you are using the “glide” transition. I haven’t had time to test the others, but I do know that “Fade” will work correctly.

This is the cause of your current problem.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

That’s great, thanks Caleb for confirming that. Have you any idea how to get the WOW working at 100%?

Neil.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

It should be as simple as placing the HTML code in a 100% width HTML item.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Caleb,

Thats what I thought, but couldn’t get it to be 100%. An example page is here:

Ignore the slow load time, nothing is optimised yet.

I’ve made a 100% width HTML item, coloured it red so I can see its 100% when previews, and inserted the Crowbar action into the HTML box with the relevant code, leaving its dimensions as undefined. When I preview, the slider keeps it dimensions of 1200px wide and does not stretch to fill. So close…!

Neil.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Neil,
I can see from the page code that the Wow Slider element (wowslider-container1) has a max width of 1200 pixels the same as the header. What you’ve forgotten about is the 20 pixels of padding on the header give it an overall width of 1240 pixels which is why your slider is 40 pixels short of the right width.
Change the wowslider-container1 max width to 1240px and you should be OK.
Regards,
Tim.

On 24 Oct 2013, at 12:35, Neil wrote:

Thats what I thought, but couldn’t get it to be 100%


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Tim,

Many thanks for the message. I forgot to say that I wanted the image to stretch the 100% width of the window, not just my container, such as Justins excellent site which I understand uses Backdraft and WOW: http://www.easthalldesign.com do you know ho I can achieve that?

Thank you letting me know about the padding issue though!

Neil.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

IF you want something to span the entire width of the window, then you have to set your page to Align: none. Unfortunately, this then means that the usual means of centering the page won’t work, and you have to build an inline (box in box) construction instead. (You can also mix fixed position and inline [relative position] elements in the same page, but you do have to forego the simple Align: center setting.)

Walter

On Oct 24, 2013, at 9:13 AM, Neil wrote:

Hi Tim,

Many thanks for the message. I forgot to say that I wanted the image to stretch the 100% width of the window, not just my container, such as Justins excellent site which I understand uses Backdraft and WOW: http://www.easthalldesign.com do you know ho I can achieve that?

Thank you letting me know about the padding issue though!

Neil.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Walt,

Thanks for the reply. I managed to get this working as expected using the above Exhibeo and CSS changes but the ‘glide’ transition has an unusual quirk, so I’ve opted for WOW.

I haven’t amended the page align to ‘none’ as I’m using the responsive backdraft template and don’t want to screw anything up. The site will be built fully inline within a HTML container (made by following Calebs tutorial here: Full Width Elements in Backdraft - YouTube). I also managed to get it working fine with a static image that stretches to the page width. In fact just about anything apart from the WOW slider. I don’t know if I need to amend any of the code output by WOW to help?

I did try setting page align to none as it stands since its already built inline, but to no avail.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Do you have anything published on line where I could inspect it? Maybe there’s a way to get what you want, but I’m not familiar enough with Backdraft to tell you off the top of my head where to look next. Generally, when you want something to be full-screen in Freeway 6, you stretch it from one side of the page to the other, and then you apply the Fixed % width style to it in the Inspector. This will force it to 100% of its container, so it really matters which container the element is enclosed within. If it’s inside the PageDiv, as all elements drawn in Freeway are, then whatever width #PageDiv is set to in your stylesheet will be the limit of how wide it can get. If #PageDiv has no width set, or is set to 100%, then it will expand to fill the browser window, and so will any 100%-width children within it.

Walter

On Oct 24, 2013, at 9:50 AM, Neil wrote:

Hi Walt,

Thanks for the reply. I managed to get this working as expected using the above Exhibeo and CSS changes but the ‘glide’ transition has an unusual quirk, so I’ve opted for WOW.

I haven’t amended the page align to ‘none’ as I’m using the responsive backdraft template and don’t want to screw anything up. The site will be built fully inline within a HTML container (made by following Calebs tutorial here: http://youtu.be/SxXJ1inx2Io). I also managed to get it working fine with a static image that stretches to the page width. In fact just about anything apart from the WOW slider. I don’t know if I need to amend any of the code output by WOW to help?

I did try setting page align to none as it stands since its already built inline, but to no avail.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Walt,

As always, thank you. You can see an example here:

and what I’m trying to achieve here:

The slider is within an HTML box (rather than directly onto the page) that is set at 100% width. The code WOW gives me is placed within this box via the Crowbar action, so I expected it to ‘take on’ the settings of the HTML box. The items are not drawn directly onto the page but all pasted within this one HTML box.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I’m seeing a slider that spans the entire page area (the width of the top bar of the site. This is the same as the browser width below a certain point (?1200px?) and then I see red sidebars to either side of it when the page cannot get any wider. Is that what you see? Do you want the image to jump out of the max-width and truly span the browser even above Backdraft’s maximum page width?

Walter

On Oct 24, 2013, at 10:12 AM, Neil wrote:

Hi Walt,

As always, thank you. You can see an example here:

Connect Creative Design

and what I’m trying to achieve here:

http://www.easthalldesign.com

The slider is within an HTML box (rather than directly onto the page) that is set at 100% width. The code WOW gives me is placed within this box via the Crowbar action, so I expected it to ‘take on’ the settings of the HTML box. The items are not drawn directly onto the page but all pasted within this one HTML box.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

If you locate the style rule #wowslider-container1, and remove the max-width: 1240 line, the image will span the entire browser, not just the defined page width (as the top bar does). This rule is coming from style.css, starting at line 6.

Loving the new Safari Web Inspector! Even in Lion! (Only updated one machine so far to Mavericks…)

Walter

On Oct 24, 2013, at 10:12 AM, Neil wrote:

Hi Walt,

As always, thank you. You can see an example here:

Connect Creative Design

and what I’m trying to achieve here:

http://www.easthalldesign.com

The slider is within an HTML box (rather than directly onto the page) that is set at 100% width. The code WOW gives me is placed within this box via the Crowbar action, so I expected it to ‘take on’ the settings of the HTML box. The items are not drawn directly onto the page but all pasted within this one HTML box.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Walt,

Many thanks for that. Is this something I can adjust in FW? Or do I have to do it after the site is published each time?

Sorry for my ignorance…


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

OK, complete non coder victory here (with a huge amount of help off Walt) I found it - inside the ‘Engine1’ folder that WOW kicks out, edited the ‘style.css’ as per your instructions and voila!

You are a God amongst problem solvers! Thank you Walt, I’m well pleased :slight_smile:

My install of Mavericks on my 2009 MacPro didn’t go so well… lost everything during a corrupted install. You gotta love backups…


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Well, its works perfectly in desktop browsers but dies a death on mobiles:

And on an iPad3, for example

http://connectcreative.co.uk/original/example.png


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Neil,

The FWP element “sidebarWrapperAlt1” has a width of 1200px. Resetting that
width to flexible (no width value) fixes the mobile view.


Ernie Simpson

On Fri, Oct 25, 2013 at 8:53 AM, Neil email@hidden wrote:

Well, its works perfectly in desktop browsers but dies a death on mobiles:

http://connectcreative.co.uk/original/index.html

And on an iPad3, for example

http://connectcreative.co.uk/original/example.png


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Ernie,

Thanks for your help. That fixes it, but I prefer the look of the main blocks of text centred in the middle rather than stretch out. It’s only the slider that I’d like to stretch, just like Justin’s site http://www.easthalldesign.com


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

The problem is “sidebarWrapperAlt1” is fixed width. You can set it to
Maximum-width 1200px, and that will fix the iPad view and center it as well.


Ernie Simpson

On Fri, Oct 25, 2013 at 10:15 AM, Neil email@hidden wrote:

Hi Ernie,

Thanks for your help. That fixes it, but I prefer the look of the main
blocks of text centred in the middle rather than stretch out. It’s only the
slider that I’d like to stretch, just like Justin’s site
http://www.easthalldesign.com


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options