Fixed text & image - Post ID 300299

User 2622524 Photo


Registered User
97 posts

Below is a link to a website that displays fixed images as well as fixed text. The beauty of this example is it also works perfectly on mobiles.

Is this possible in Site Designer I have tried various options but was unable to achieve the same results.

Any help or tips would be appreciated

https://olsonkundig.com/
User 2699991 Photo


Registered User
5,077 posts
Online Now

Sure is Chris,
and it can be done using pure CSS too but it involves some trickery boo at mobile device widths, which is going to be a bit lengthy and complicates to explain , I think unless someone else chips in it would be best for me to show how with a step-by-step tutorial. Unfortunately, I cannot do one until the weekend (or perhaps Friday afternoon (Indonesian time)

I seem to remember you have used the foundation framework and the CSS grid stuff before, that would be the easiest way, are you planning on using foundation framework and the CSS grid built into Site Designer?
It can also be done the normal way using other frameworks and flexing etc,

Maybe someone will be able to chip in before I can help.

Wayan
Update
Are you planning this for a new site or for updating an existing one?
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://mawarputih.coffeecup.com/forms/contact-wayan/

A simple quick way to contact me
https://rsd-tutorialscom.coffeecup.com/ … l-details/
User 122279 Photo


Senior Advisor
14,547 posts

The site has been made with a WordPress template. It looks like a lot of background images in containers with a fixed position and then texts with position absolute. Yes, it should be possible to create it in SD.
I'm a bit pressed for time right now, otherwise, I could have knocked up a demo. But perhaps someone else will do that.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 122279 Photo


Senior Advisor
14,547 posts

As usual, Wayan beat me to sending a reply :lol:
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 2699991 Photo


Registered User
5,077 posts
Online Now

Inger wrote:
As usual, Wayan beat me to sending a reply :lol:


Seems that we are both quick to reply but stuck for time and the opportunity to help at the moment.:D:D:D:P:cool:
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://mawarputih.coffeecup.com/forms/contact-wayan/

A simple quick way to contact me
https://rsd-tutorialscom.coffeecup.com/ … l-details/
User 2699991 Photo


Registered User
5,077 posts
Online Now

Hi Chris
I got up an extra hour earlier today, so I managed to cobble together a "live view' of something like,
it uses position = sticky (not fixed) even on mobile devices (live view so you can have a look on mobile device too.

It's all done within 'Site Designer' no outside JS or CSS etc, just Site Designer
It's a bit rough and ready, but the way to do it remains the same (the rest is just styling.

Let me know if that is something like what you are after.

https://alphathemes.coffeecup.com/index.html
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://mawarputih.coffeecup.com/forms/contact-wayan/

A simple quick way to contact me
https://rsd-tutorialscom.coffeecup.com/ … l-details/
User 2622524 Photo


Registered User
97 posts

Hi Wayan & Inger
Thank you for the fast feedback and advice. I will only be starting this project in about three weeks' time, but I am already doing some forward planning.

Wayan I had a look at what you did but I see the same issues with the background image not displaying correctly or displaying full screen and text displaying over each other, see screen captures attached.
Attachments:
User 2699991 Photo


Registered User
5,077 posts
Online Now

Chris wrote:
Hi Wayan & Inger
Thank you for the fast feedback and advice. I will only be starting this project in about three weeks' time, but I am already doing some forward planning.

Wayan I had a look at what you did but I see the same issues with the background image not displaying correctly or displaying full screen and text displaying over each other, see screen captures attached.


oops I forgot to do the z-index at small widths (it was 3"00 am when I did iy )
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://mawarputih.coffeecup.com/forms/contact-wayan/

A simple quick way to contact me
https://rsd-tutorialscom.coffeecup.com/ … l-details/

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.