Mobile - make column invisible to mobile users?

Hi Themeco,
Needing some help in the mobile department. I was hoping there was a feature in here where you can hide one column from desktop users, and make that column visible to mobile users (and vice versa). But it doesn’t look like you have that feature.
So how do I make my website mobile friendly? I have 2 pages that need to be fixed for mobile:


Hello There,

Thanks for writing in! What you are trying to do may or may not possible with WP Bakery Visual Composer. If you have used Cornerstone in building your pages, you can easily show/hide a section, row, columns or any element in different screens using the “Hide During Breakpoint” option. If you want, you will have to re create your page and this time around you’ll have to used Cornerstone. To know more about the “Hide During Breakpoint” options, please check this out: https://theme.co/apex/forum/t/hide-during-breakpoint-explained/17378

Hope this helps.

Hi RueNel,
The website was done in visual composer. It is finalized - so I cant change it over to cornerstone.
What do you recommend for a visual composer setup?
Thanks,
Ashley

Hello There,

With Visual Composer, there is no “Hide During Breakpoint” option. What you can do is to add a custom class for the content bands or containers that you would like to hide in the different screen sizes. You use this custom classes:

  • x-hide-xl - to hide the container in extra large screens
  • x-hide-lg - to hide the container in large or desktop screens
  • x-hide-md - to hide the container in medium or tablet screens
  • x-hide-sm - to hide the container in phone or small screens
  • x-hide-xs - to hide the container in extra small screens

For example:

We would loved to know if this has work for you. Thank you.

Hi again, there is no such thing as “row settings” perhaps it was changed during an update?
Regardless, I tried to input it in every column / section I had. It would only get rid of the white background and not the text.
Any other ideas?

Alternativly I tried doing the following:

Add this line of code to my CSS:
/this will be applied for all screens between 414px and 736px/
@media screen and (max-width: 414px) and (min-width: 736px) {
.innerblockcell {
background-color: #ffffff !important;
padding-left: 0px !important;
padding-right: 0px !important;
padding-bottom: 25px !important;
padding-top: 25px !important;
}
}

Then in the content band settings, I’ve added an additional css name “innerblockcell”, so now there is 2 CSS names “inneraboutblock inneraboutblockcell”… still not working…

Hi,

Adding the classes in your column settings should work.

Do you mind providing a screenshot and indicate the elements you want to hide in mobile.

Thanks

Hi Paul,
I created little video, so you can better see what I’m trying to do.
https://tayloredaccessibility.com/wp-content/uploads/2018/07/Paul-Instead-of-screen-grabs.mp4

Its the 2 bio elements I am trying to hide: https://tayloredaccessibility.com/about-us/ - as they look awful on iphone.
I’ve tried placing the x-hide-sm, but it just hides it on desktop as well. Also trying to do the same thing on the service page.

Hi Ashley,

Thank you for the screencast, you don’t need to write a new @media query {}, that will just make things confusing.

Let’s refer back to the CLASS that Ruenel provided above, those are already defined on the Theme so you don’t need to rewrite those.

Apply this classes on the Content Band (on visual composer it is referred as ROW)

x-hide-sm x-hide-xs this will hide the Content Band on screen 767px and below (hide on mobile).

x-hide-xl x-hide-lg x-hide-md this will hide the Content Band on screen 768px and above (hide on desktop).

With this in mind, you should able to do what you’re after.

Again, please remove all the @media query {} you wrote with regards to this to avoid conflict.

Another solution is to write a CLASS that reset/adjust the padding to 0 on mobile. That is

@media (max-width: 767px) {
	.reset-padding {
		padding: 0 !important;
	}
}

Then apply the CLASS reset-padding on your Columns. Try both solutions and see which one works for you.

Hope this shed some lights,
Cheers!

Hi @friech, the “x-hide-sm” stuff is working - but as soon as you change the phone to landscape mode - it disappears. :slightly_frowning_face:

I thought that the landscape view must be in medium view, so I did the follow:

I duplicated the column 3 times.

the first column is hiding, Xsmall, small and medium (Desktop view)
the second duplicate column is hiding everything but medium (tablet)
the third duplicate column is hiding XL, LG, and Medium. (mobile)

Still no luck - but portrait looks perfect!

Also in ipad Mini - the opposite happens, landscape everything appears - portrait it disappears.

Hi Ashley,

In that case, please provide us login credentials in a secure note so we can take a closer look.

Did you try the reset-padding solution? How did it go?

Thanks,

Never mind! I fixed it! I used your reset-padding and it actually a better recommendation!!
Thanks so much for your help!

Ashley

You’re more than welcome, glad we could help.

Cheers!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.