Adding "None" on page in FF - Post ID...

User 2765857 Photo


Registered User
614 posts

Hello all,
When using RSD from desktop down one can add in Position Display "None " at a lower Break point to hide ie. graphic, banner etc. Can I do that with FF if that is mobile up? OR do I start with less on the smaller point and add more that I want for desktop viewing and not use Display "None"?

If anyone gets a chance let me know what you think so far of the way the site is coming along would appreciate it, I know many here are excellent web designers ( I see your work and only wish I had half the the knowledge you do) I appreciate ALL your input and help.

The 2nd link in the signature,
Ray
Ray aka Kreations
Since 1994 Chocolate bar wrappers for all occasions.
Since 1972 helping clients help "Discover Their Dream Vacation"
User 122279 Photo


Senior Advisor
14,450 posts

I would start by adding everything, all visible at first. When you have it there in front of you, you can make certain parts of it invisible.

The site you are working on looks fine. I think I would change one thing, at least for small screens: The order of appearance of the main text and the image. Let possible customers see the image before they read the text, to better create an interest in seeing new places.
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 244626 Photo


Registered User
811 posts

Desktop down RSD 1.5 would hide down between two breakpoints.

RSD 2.0 and FF, BB mobile up would hide up from between two breakpoints.

I will note that there are additional visibility classes available for Foundation which are small, medium, and large but they do not seem to correspond to the breakpoints I have setup in my default template so I think I would have to change the locations of my breakpoints for them to be useful.

You can read about these here:
http://foundation.zurb.com/sites/docs/visibility.html

As I said though, they are kind of confusing to use since hiding and showing can occur between two breakpoints which is confusing.
Bootstrap 5 CSS Grid.
User 2765857 Photo


Registered User
614 posts

Inger wrote:
I would start by adding everything, all visible at first. When you have it there in front of you, you can make certain parts of it invisible.

The site you are working on looks fine. I think I would change one thing, at least for small screens: The order of appearance of the main text and the image. Let possible customers see the image before they read the text, to better create an interest in seeing new places.


Thank you Inger for the reply, In RSD I had no problem adding "None" where I wanted it since it was desktop down now with FF mobile first I seem confused (what else is new) I will use a page and practice and see if that is the way we will go if needed.

Thanks for the info about the appearance of text vs images on smaller screens: Would you than think putting the Hero image on top is the better way? Now thinking about it I tend to agree with you, that is another thing I will try and get to tomorrow. I Appreciate you checking the site thank you.
Hey Inger any more snow? Here in NJ they say maybe up to 12 or more inches Monday night into Tuesday sometime and to think Spring is around the corner.
Ray
Ray aka Kreations
Since 1994 Chocolate bar wrappers for all occasions.
Since 1972 helping clients help "Discover Their Dream Vacation"
User 2765857 Photo


Registered User
614 posts

Twinstream wrote:
Desktop down RSD 1.5 would hide down between two breakpoints.

RSD 2.0 and FF, BB mobile up would hide up from between two breakpoints.

I will note that there are additional visibility classes available for Foundation which are small, medium, and large but they do not seem to correspond to the breakpoints I have setup in my default template so I think I would have to change the locations of my breakpoints for them to be useful.

You can read about these here:
http://foundation.zurb.com/sites/docs/visibility.html

As I said though, they are kind of confusing to use since hiding and showing can occur between two breakpoints which is confusing.


Twinstream, Thank you also for the reply I bookmarked the zurb info and will read what they have. Hiding certain banners or images I may want to do on the smaller screens only, so will look into it more.
Ray
Ray aka Kreations
Since 1994 Chocolate bar wrappers for all occasions.
Since 1972 helping clients help "Discover Their Dream Vacation"
User 122279 Photo


Senior Advisor
14,450 posts

I hope we have had our blizzards for this winter by now. We still have snow on the ground, but no more threats of snowfall for the next 10 days at any rate.

Why don't you arrange any trips to Norway BTW? ;)

If you have got your head wrapped around flex-box, you can shift the order of elements easily.
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 2765857 Photo


Registered User
614 posts

Inger wrote:
I hope we have had our blizzards for this winter by now. We still have snow on the ground, but no more threats of snowfall for the next 10 days at any rate.

Why don't you arrange any trips to Norway BTW? ;)

If you have got your head wrapped around flex-box, you can shift the order of elements easily.

Flex box is what I have to learn and it may be easy for a expert like you :D but for me not being designer it will take me a long time to learn but will try as time permits.

We would love to add info about Norway on site and Different areas to visit. Will see what our suppliers have that we can add. Visting Norway is on our bucket list :D
Ray
Ray aka Kreations
Since 1994 Chocolate bar wrappers for all occasions.
Since 1972 helping clients help "Discover Their Dream Vacation"
User 244626 Photo


Registered User
811 posts

I have been to Oslo :cool:
Bootstrap 5 CSS Grid.
User 122279 Photo


Senior Advisor
14,450 posts

:D
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
4,797 posts
Online Now

RAY WROTE: Twinstream, Thank you also for the reply I bookmarked the zurb info and will read what they have. Hiding certain banners or images I may want to do on the smaller screens only, so will look into it more.

Ray, the simple way to do hiding of elements at lower points is
1/ Do as Inger suggests make all your elements in the usual way (eg visible)
when you have done that, at the right of the highest breakpoint you have made,, select the element you want to hide (make sure it is the right one (use inspector to check it)

Then without selecting anything else, go down to the left of your lowest breakpoint
Change the display for the element you want to set to none (from whatever it was displayed
as before)

Then move up to the next higher breakpoint, if you still want it display none at that point keep moving up until you reach the breakpoint where you want the element to be visible again, at that point change the element display back to what it was at the highest breakpoint,, if there are any more breakpoints then check the display at those is correct until you reach back to the highest breakpoint.

This may seem like a tedious long winded way to do it,, but it is easiest way until you can start to visualize everything starting mobile first.

Repeat those steps for any other elements you want to hide


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/

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.