Will RCS allow a carousel-like...

User 379556 Photo


Registered User
1,533 posts

It may be that a general method for elements with position fixed or absolute will help.

To get a fixed-position element to centre horizontally on the browser window I do the following -
(a) I ensure that the width of the element is set (e.g. 150px).
(b) Under the Position boxes, I set Left (the setting immediately below the Sticky box) to 50vw.
(c) I set the margin-left (the right-most Margin setting) to minus half the width of the element [i.e. in the example at (a) above it would, of course, be -75px].

The same idea applies to getting an absolute-position element to the centre horizontally of its container, but using 50% rather than 50vw.

What happens of course is that (b) pushes the left end of the element to the centre, and (c) pulls it back to bring the element to the exact centre.

Frank
User 2503578 Photo


Registered User
102 posts

Another example of many ways to configure your project in SDv3. I think the flexibility of the software is what makes this challenging. I am so thankful for everyone who has jumped in with recommendations.

I fell into this configuration:

a. Set text (header or paragraph) to fixed position with Z=1. Text property is set to centered.
b. Text goes into a container. Container Display is set to Flex, Row, No Wrap, Align=Center/Baseline, Justify=Center.

This appeared to allow the text to be fixed vertically on the screen and centered horizontally no matter the size of the wide screen.



Diana
User 2699991 Photo


Registered User
4,782 posts
Online Now

DianaH wrote:
Another example of many ways to configure your project in SDv3. I think the flexibility of the software is what makes this challenging. I am so thankful for everyone who has jumped in with recommendations.

I fell into this configuration:

a. Set text (header or paragraph) to fixed position with Z=1. Text property is set to centered.
b. Text goes into a container. Container Display is set to Flex, Row, No Wrap, Align=Center/Baseline, Justify=Center.

This appeared to allow the text to be fixed vertically on the screen and centered horizontally no matter the size of the wide screen.



Diana


The images are background images in the container for the slides, then a container is inserted in each slider too with a paragraph & the words

then simply a matter of using margins to place the container where you want it to be over the image.

IT is the MENU & HEADER thats FIXED & all that needs is making the width back to 100% after giving it the "fixed position" no need for any other messing about.

If you would like a video tutorial as to how to do it, just let me know & it shall be doone
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 2503578 Photo


Registered User
102 posts

Wayan - What I did works, but not quite they way it should. A video on how to do what you recommend here would be perfect.

Diana
User 2699991 Photo


Registered User
4,782 posts
Online Now

Ók but will be tomorrow java time as I need a few hours sleep now
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 2503578 Photo


Registered User
102 posts

Wayan Jaya wrote:


The images are background images in the container for the slides, then a container is inserted in each slider too with a paragraph & the words

then simply a matter of using margins to place the container where you want it to be over the image.

IT is the MENU & HEADER thats FIXED & all that needs is making the width back to 100% after giving it the "fixed position" no need for any other messing about.

If you would like a video tutorial as to how to do it, just let me know & it shall be doone


In the meantime, I tried this. I understand it, but when I add the picture to the background of orbit-slide and delete the orbit-image, the slide becomes small. On the designer screen, it is as wide as the paragraph. When I preview, the slide is about 1/4 of the size. I changed width and depth to 100% and no change. In fact, most adjustments made no significant changes. Thoughts?
User 2503578 Photo


Registered User
102 posts

This is just the orbit portion using my photos and attempting to add a paragraph on the first slide. I'm only looking at a widescreen view. The first photo in the slideshow is small. Not sure how to correct.

I tried to upload it, but the forum would not allow even though it was a .RSD. Here's a link to it on DropBox:

https://www.dropbox.com/s/cfn81u6kgtonh … t.rsd?dl=0
User 2699991 Photo


Registered User
4,782 posts
Online Now

DianaH wrote:
This is just the orbit portion using my photos and attempting to add a paragraph on the first slide. I'm only looking at a widescreen view. The first photo in the slideshow is small. Not sure how to correct.

I tried to upload it, but the forum would not allow even though it was a .RSD. Here's a link to it on DropBox:

https://www.dropbox.com/s/cfn81u6kgtonh … t.rsd?dl=0


Hi DianaH
Sorry about the video I said I would do I have been without Internet except for on my phone, for 3 days but has just come back I will look at the file now & then make the video later today as it is just gone midnight here & everyone except me the dogs & the ducks are asleep
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 2699991 Photo


Registered User
4,782 posts
Online Now

DianaH wrote:
This is just the orbit portion using my photos and attempting to add a paragraph on the first slide. I'm only looking at a widescreen view. The first photo in the slideshow is small. Not sure how to correct.

I tried to upload it, but the forum would not allow even though it was a .RSD. Here's a link to it on DropBox:

https://www.dropbox.com/s/cfn81u6kgtonh … t.rsd?dl=0


So are you wanting the orbit slider images to be full screen?

The problem seems to be with the new version of SD (3.5) it's not recognising the height in % values,, change the list container to VH = 100
Then adjust the top padding of the container with the paragraph tp whatever horizontal position you want

but your images are huge still except for the first one which is tiny (460 pixels wide, it will look grainy at anything close to a viewport greater than 600px wide.
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 2503578 Photo


Registered User
102 posts

Wayan Jaya wrote:


So are you wanting the orbit slider images to be full screen?

The problem seems to be with the new version of SD (3.5) it's not recognising the height in % values,, change the list container to VH = 100
Then adjust the top padding of the container with the paragraph tp whatever horizontal position you want

but your images are huge still


No. I want the images to look just like they do on http://threeoaksvineyard.com/. But I want to move the "Tasting room and patio..." paragraph to be words across the picture. Much like you did. Hopefully, what you see on my live site is not large pictures. It's not on mine.

Changing container to VH = 100 and Background from Custom to Contain seems to fix it. I even have the words on the picture just like I want. However, now there is an unintended padding between the bottom of the picture and the buttons below. It's like leaky pipes, lol. Maybe I should wait for the video.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.