Hiding cells on mobile view

  • Resolved dammsugare

    (@dammsugare)


    6 years, 4 months ago

    Hi,
    I am having trouble when trying to hide certain cells for mobile devices. If I either add display:none; to either the widget mobile setting or the cell mobile setting, it won’t get displayed on mobile, BUT there still is the 30px of this cell visible. I also tried giving the cell an ID or a class and then using display:none; in my css file, I also tried giving that special cell class/ID a negative margin of -30px for mobiel view, but the 30px margin ALWAYS still gets displayed. Now I know that I can hide it with 

    #pgc-3-0-0.panel-grid-cell{
margin-bottom:0;
}

    for mobile devices, but since I have multiple pages where I need to do this I would need to add a million of these selectors…that can’t be the way it is supposed to be? How can you hide cells including the 30px margin on mobile easily and coder-friendly??

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Support Andrew Misplon

    (@misplon)

    Hi, thanks for posting. Can you perhaps share a link to a page concerned so we can take a look at the overall setup? Thanks.

    Thread Starter dammsugare

    (@dammsugare)

    Hi,
    thanks for your reply.
    You can see an example here. Let’s say I want to hide the first cell on mobile. If I set display:none; for this cell in the cell mobile layout settings, it won’t get displayed but you still have the 30px bottom margin. Same thing if you set display:none; for the widget mobile settings. Even if you give the cell or widget a class or id and the add css in your custom css, the same thing is happening.

    Plugin Support Andrew Misplon

    (@misplon)

    Thanks for the test page. This is, unfortunately, a consequence of where styles are added in the Page Builder layout. We looked changing this structure earlier this year but caused a lot of problems for existing layouts and users so the change was reverted. One idea would be to add a row class and then add to Appearance > Custom CSS or Customize > Additional CSS, something like this:

    @media (max-width: 680px) {
	.hide-first-mobile .panel-grid-cell:nth-of-type(1) {
		display: none;
	}
}

    In this example, we’re hiding the first cell in the row. The class name we added to the row class field is: hide-first-mobile. Let me know if this helps. Thanks.

    Thread Starter dammsugare

    (@dammsugare)

    Hi Andrew,
    yeah, I figured that additional css is always needed. Thank you for the help!

    Plugin Support Andrew Misplon

    (@misplon)

    For sure ?? Glad we could make some progress. All the best.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Hiding cells on mobile view’ is closed to new replies.