@media only screen and (max-width: 1000px) { .mobile-hidden { display: none!important; } } @media only screen and (min-width:1000px) { .desktop-hidden { display: none!important; } }
Than in the page I duplicated each of the fullscreen rows and on the original rows I added on the custom class 'mobile-hidden' and on the duplicates 'desktop-hidden'. I am now trying to adjust the mobile version to suit the smartphones view. The custom class for the mobile-hidden rows works fine but for the desktop-hidden rows it doesn't work at all. The hidden rows are still visible on desktop but only the overall background colour and no content. You could see this by visiting imagismmedia.website from a desktop. The first row, which is mobile hidden looks fine, the second row which is desktop hidden appears like a blank page and so on. I read through the comments to find a solution and someone was saying to disable the parallax effect from the scrolling effect and select default scroll which got rid of the empty rows but the scrolling in this case doesn't work properly. First scroll does nothing, than it works than scrolling down will scroll actually up and so on.
Trying your solutions will indeed hide the column but not the row. Therefor on desktop the fullscreen row is still in there but with no content on it, it looks like a blank page.
On the other hand if I don't have separate rows for desktop and mobile, the mobile version looks awful and the content is all over the place. How would you advise to do in this situation?
I dont see why there is a need to have separate rows for desktop and mobile ?. You can use Inner Rows and then show hide the columns as well as the rows using these css classes Hiding Rows on Mobile / Desktop in Visual Composer
Thanks a million for your response. I never thought about this and your solution solved my problem.
I have another small issue if you could please help me with.
On the smartphone when a page is loading the logo appears duplicated for a while until the page is fully loaded and then the duplicate disappears and looks normal.
Hi,
I have added the following to the custom css:
@media only screen and (max-width: 1000px) {
.mobile-hidden {
display: none!important;
}
}
@media only screen and (min-width:1000px) {
.desktop-hidden {
display: none!important;
}
}
Than in the page I duplicated each of the fullscreen rows and on the original rows I added on the custom class 'mobile-hidden' and on the duplicates 'desktop-hidden'. I am now trying to adjust the mobile version to suit the smartphones view. The custom class for the mobile-hidden rows works fine but for the desktop-hidden rows it doesn't work at all. The hidden rows are still visible on desktop but only the overall background colour and no content. You could see this by visiting imagismmedia.website from a desktop. The first row, which is mobile hidden looks fine, the second row which is desktop hidden appears like a blank page and so on. I read through the comments to find a solution and someone was saying to disable the parallax effect from the scrolling effect and select default scroll which got rid of the empty rows but the scrolling in this case doesn't work properly. First scroll does nothing, than it works than scrolling down will scroll actually up and so on.
Could you please advise,
Thanks,
John.
Hey Again,
Those css dont get applied when the "Page Fullscreen Rows" Option is enabled . Also rows cant be hidden as well .
Try using the VC Column Responsive Options :
Be.st
ThemeNectar Support Team
Hi Tahir,
Trying your solutions will indeed hide the column but not the row. Therefor on desktop the fullscreen row is still in there but with no content on it, it looks like a blank page.
On the other hand if I don't have separate rows for desktop and mobile, the mobile version looks awful and the content is all over the place. How would you advise to do in this situation?
Thanks,
John.
Hey Again,
I dont see why there is a need to have separate rows for desktop and mobile ?. You can use Inner Rows and then show hide the columns as well as the rows using these css classes Hiding Rows on Mobile / Desktop in Visual Composer
Be.st
ThemeNectar Support Team
Hi Tahir,
Thanks a million for your response. I never thought about this and your solution solved my problem.
I have another small issue if you could please help me with.
On the smartphone when a page is loading the logo appears duplicated for a while until the page is fully loaded and then the duplicate disappears and looks normal.
Any idea please on how to fix this?
Thanks,
John
I am attaching here a screenshot for the issue mentioned below.
Thanks,
John.
Hey Again,
Try using the Optimization plugins recommended in this Article http://themenectar.com/docs/salient/performance-optimization-guide/ and check if that makes a difference .
Best
ThemeNectar Support Team