[irisdigitalservicesParticipant]

Hello there!

I’ve been trying to achieve the following:

On Desktop/Laptop:
Hide all the elements on the homepage (such as header, footer, copyright, navbar etc.) except for a “fashion” template based full-screen Revolution slider.

On Mobile:
Display the page with all its content sections and elements normally (and the rev slider hidden, which I have achieved using slider settings)

I’m using the following CSS which is giving me desired results on a Desktop but shows a blank page when accessed on a mobile:

@media (max-width:  700px) {
.page-id-231 .x-colophon.bottom {display: none !important;}
.page-id-231 .x-navbar-wrap {display: none !important;}
.page-id-231 .masthead {display: none !important;}
.page-id-231 .x-header-landmark {display: none !important;}
.page-id-231 .entry-header {display: none !important;}
.page-id-231 .x-landmark {display: none !important;}
.page-id-231 .x-scroll-top.right {display: none !important;}
}

Site url: http://surajmarbles.com

Any thoughts?

[irisdigitalservicesParticipant]

This reply has been marked as private.

[irisdigitalservicesParticipant]

I am sorry because I believe this question has already been asked; however, any custom CSS code including the one below I have seen as a solution has not worked with my site.

@media (min-width: 767px){
.home .x-colophon.bottom {display: none;}
.home .x-navbar-wrap {display: none;}
.home .masthead {display: none;}
.home .x-header-landmark {display: none;}
.home .entry-header {display: none;}
.home .x-landmark {display: none;}
.home .x-scroll-top.right {display: none;}
}

[JoaoModerator]

Hi There,

Your second code seems correct.

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks

Joao

[irisdigitalservicesParticipant]

This reply has been marked as private.

[irisdigitalservicesParticipant]

Hey Joao,

I have figured out why the mobile version was giving me a blank page. It was a blank page. My bad.

The mobile site is working fine now, however, as you would see on the link below, the homepage on desktop is now showing the newly added content and the footer along with the rev slider above masthead.

Any way to just completely hide all the content, navbars, header, footer on Desktop site; and just have the full-screen slider revolution?

It would be perfect if I could somehow disable the scroll as well (only on desktop versions).

Site url: http://surajmarbles.com

Thanks for all your help. Hope y’all are having a nice day!

Ash

[irisdigitalservicesParticipant]

Added this to the CSS and the footer widgets are gone from Desktop version:

.home .x-colophon.top {display: none !important;}

And changed the visibility setting of all the sections to hidden on desktop via Cornerstone.

Just wondering what CSS would one use to hide visibility of page body (sections) on Desktops, with CSS without having to change visibility settings of every section?

Thanks for looking into it anyway. For my next project, X is the obvious choice.

Ash

[irisdigitalservicesParticipant]

You can close the thread btw. Thanks.

[FriechModerator]

Glad you sorted things out, Should you require any further assistance with X|THEME and Cornerstone, please feel free to get in touch with us.

Cheers!

[Author]

Posts