How to make a column invisible at...

User 334618 Photo


Registered User
23 posts

Hi,

I have a row that is divided into two columns.
In the large laptop size, I'd like both columns to be visible.
On the smaller mobile screen, I'd like only one column to be visible and the other to disappear.

How do I set visibility across breakpoints?

I tried using the Display: Block to make the column visible at large screen sizes, and Display: None to make it invisible, but what happened is the column is either visible or invisible across all breakpoints that way. I can't find a way to customize the visibility that follows the breakpoint.
Thank you

User 122279 Photo


Senior Advisor
14,632 posts

It's a while since I've been working with RSD now, but I guess you are starting with the mobile screen, then widening it after the various breakpoints?

A clarifying question: The contents of the column that you want to hide at small widths, is that also going to disappear, or is it to appear in the visible column? If so, I think I would have just one column covering the whole width, and using containers inside it to pop the contents in. They can be shifted around or made visible/invisible at any breakpoint.

If my reply is still 'clear as mud', it would be a good idea if you could let us see your project file, to better understand what you want. You can zip your file and attach it here, or if it is too large, pop it in a dropbox or similar and let us have a link.

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,315 posts

Hello
You need change the visibility at all breakpoints so starting at the lowest make the column display = none then when you get to the breakpoint you want it to be visible change the display back to = block
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


A simple quick way to contact me
https://mawarputih.coffeecup.com/forms/contact-wayan/
User 334618 Photo


Registered User
23 posts

Hi, thanks I am still frustrated after several hours.

I'm using the standard template "The Coast"

The very first row after the main picture has two columns. One is text, the other is several boxes with info. I like the column with boxes on the large format, but on a small screen, I want that entire column to simply disappear. I don't want people to waste time having to scroll past all of that.

How would you fix this so that the column is visible on large format, but when it reaches the breakpoints where it drops down, it simply disappears?

Here are the photos, thanks, The Coast should be available on anyone's copy of RSD
Attachments:
User 2699991 Photo


Registered User
5,315 posts

L M wrote:
Hi, thanks I am still frustrated after several hours.

I'm using the standard template "The Coast"

The very first row after the main picture has two columns. One is text, the other is several boxes with info. I like the column with boxes on the large format, but on a small screen, I want that entire column to simply disappear. I don't want people to waste time having to scroll past all of that.

How would you fix this so that the column is visible on large format, but when it reaches the breakpoints where it drops down, it simply disappears?

Here are the photos, thanks, The Coast should be available on anyone's copy of RSD


So once again
move the slider just to the left of the lowest break point
select that container that you want to simply disappear
select the "styles" tab
slide on down to the "layout" section
under the "display" thingy
move on over to the "more" tab
make a note of what it is set at (block,inline etc)
open the dropdown menu
choose "none"
BOOM it's gone

now move the slider up until you want it to appear
at that breakpoint, change the "none" back to what is was before

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


A simple quick way to contact me
https://mawarputih.coffeecup.com/forms/contact-wayan/
User 334618 Photo


Registered User
23 posts

Its not working. I think the problem is all of these items are not in a single container. Have you tried doing it in The Coast?

If I try to make the subgrid row invisible, it applies across all breakpoints not just the smaller breakpoints.
User 2699991 Photo


Registered User
5,315 posts

L M wrote:
Its not working. I think the problem is all of these items are not in a single container. Have you tried doing it in The Coast?

If I try to make the subgrid row invisible, it applies across all breakpoints not just the smaller breakpoints.

Just make the second subgrid container that holds the items none not the whole row

I don't have the coast theme
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


A simple quick way to contact me
https://mawarputih.coffeecup.com/forms/contact-wayan/
User 2699991 Photo


Registered User
5,315 posts

Wayan Jaya Foundation 6 wrote:
L M wrote:
Its not working. I think the problem is all of these items are not in a single container. Have you tried doing it in The Coast?

If I try to make the subgrid row invisible, it applies across all breakpoints not just the smaller breakpoints.

Just make the second subgrid container that holds the items none not the whole row

I don't have the coast theme


I have RSD somewhere relaxing in retirement spending it's days with RLM by the pool somewhere on my retirement home for application pensioners external drive :D I will try wake it up and bring it back out of retirement long enough to show you how to do it.
What version of RSD are you using

Hang on if you can, or call back in later (depending on where you are in the world and what time it is,
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


A simple quick way to contact me
https://mawarputih.coffeecup.com/forms/contact-wayan/
User 334618 Photo


Registered User
23 posts

Thank you really appreciate it. In the us but an insomniac, will be up late
User 334618 Photo


Registered User
23 posts

OMG nevermind I figured it out, you have to click on the subgrid column and that seems to work.

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.