[Resolved] I cannot hide a container element in mobile view

[Author]

Posts

[cynthiaH]

Hi, I've made page layout as shown in the attached image. Section 1 and section 2 are essentially same thing. However, they are in different format for different layout. So what I wanted to achieve is: In a desktop or ipad view, show section 1 and hide section 2; In a mobile view, show section 2 and hide section 1.
When I say "Hide", I meant use the "Hide element" button in Toolset setting.
I was able to achieve the desktop view by hiding 2 and show 1; However, I cannot achieve the desired mobile view. Although I chose to hide section 1 when it's mobile, section 1 still shows in the mobile view. So I ended up having both section 1 and 2 on my mobile which is messy. Please see attached screenshot on the container that is shown incorrectly.
So I thought maybe I just write a CSS code to dictate it. But I could not find a place to write CSS code for a container (I was able to write CSS for a view section in the past).
Could you please help me either hide section 1 in mobile view, or tell me where to add a CSS code?
Thanks!

[Shane]

Hi Cynthia,

Thank you for getting in touch.

Are you using a content template for the design ? If so then there should be a custom css section on the template where you can add your custom css. See Screenshot

Thanks,
Shane

[cynthiaH]

Hi
No, I'm not using a content template. I was just editing directly in the page

[Shane]

Hi Cynthia,

Ok thank you then you will need to add the custom css to your website's css or use a custom css plugin to add the css.

One such plugin that you can use is the one below.
https://wordpress.org/plugins/custom-css-js/

Thanks,
Shane

[cynthiaH]

Hi
So do you know why the "Hide element" button in the Toolset setting did not work for this container? It worked for my other containers. That's weird

[Shane]

Hi Cynthia,

It should work as intended.

I cannot really say without actual physically looking at the site to find whats wrong.

If you like I can have a look for you if you provide me with the admin details as well as a link to the page that has the issue.

Thanks,
Shane

[cynthiaH]

Hello
I just want to let you know that I found out why the hide element button did not work for that section.
It was because of the spacers in that container. So I ended up putting the spacer in one container and the buttons in another container. Then I hide both containers. It worked.
But when I had spacers and buttons all in one container, then the the hide function won't work. I'm not sure what's the theory behind it. But I thought it might be useful for other users to know.
My problem is now resolved.

[Shane]

Hi Cynthia,

Thank you for sharing the details with me. Happy that you were able to figure out why it wasn't working.

This information will surely be able to assist others. If there are no further questions then you can go ahead and mark this ticket as resolved.

Thanks,
Shane